Javascript 导入或需要由react应用程序创建的捆绑js文件

假设我有一个使用redux和一些ajax调用的普通react应用程序。 如果我想将它传递给某人，我会给他们我用webpack创建的捆绑js文件，并要求他们将其包含在HTML中，并呈现一个id为“myApp”的div，例如：

好的，如果他们的网站也是用react创建的，并且他们希望在其中一个组件中包含我的捆绑js文件，当然还要呈现相关的

div

我试图使用

import

或

require

来模拟这一点：

require（'./path/to/myBundle.js'）

import./path/to/myBundle.js'

例如：

    //...
    import './path/to/myBundle.js'; // the file that will render myApp to the relevant div
    // ....
    export function SomeApp(args){
            return(
                <div>  
                    <div id="myApp"></div>
                    <SomeComponent />
                </div>
            );
        };`

我试图在app2的主页组件中呈现app1。
因此，我将“已发布”文件从app1复制到app2的根目录，并调用文件夹app1，然后添加了一个导入调用：

import {app1} from '../../app1/app1Bundle';

以及返回函数中的匹配标记：

const HomePage = () => {
  return (
    <div>
      <app1 />
      <h1>App 2</h1>
    </div>
  );
};

甚至只是把脚本作为一个普通的js脚本

import '../../app1/app1Bundle';

或
需要（'..//app1/app1Bundle'）

然后尝试呈现id为“app1”的普通div标记

const主页=（）=>{
返回(
应用程序2
);
};

似乎什么都不管用，因为我仍然会犯同样的错误。
我认为问题在于脚本加载的时间和元素的渲染。我认为当捆绑脚本正在搜索div时，div还不存在。
默认情况下，Webpack将把entry模块作为变量公开，这在包含带有
标记的脚本时非常有用。（因此，如果您
需要
它，您可能只会得到
{}
）但是，如果您想从其他模块加载捆绑包，您需要告诉Webpack将其作为导出模块公开

最简单的方法是设置

{
  ...
  "libraryTarget": "umd"
}

在您的网页包配置中。有了这些，Webpack知道它应该将您的输入模块公开为Webpack中所需的模块，但也可以根据需要加载
标记

我面临的主要问题是，在DOM包含它所需的目标div之后，包含app1的捆绑js文件。

我最后做的是，在app2项目中创建一个组件，它将
require（）
捆绑在
componentDidMount（）
上的js文件，并将呈现和返回带有相关id的目标
div


我创建组件的原因纯粹是出于可重用性目的，而不是在每个需要它的组件上都要求使用带有
componentDidMount（）
的脚本

因此，这是组件：

import React from 'react';

class AppOne extends React.Component {

  componentDidMount() {
    require('../app1/app1Bundle.js');
  }

  render() {
    return (
      <div id="app1"></div>
    );
  }
}
export default AppOne;

从“React”导入React；
类AppOne扩展了React.Component{
componentDidMount（）{
需要（'../app1/app1Bundle.js'）；
}
render（）{
返回(
);
}
}
出口违约责任；

这就是我在其他组件中使用它的方式：

import React from 'react';
import AppOne from './AppOne';

const HomePage = () => {
  return (
    <div>
      <h1>App 2 - wrapper for app1</h1>
      <hr />
      <AppOne />
      <hr />
      <h1>This is App2 as well </h1>
    </div>
  );
};

export default HomePage;

从“React”导入React；
从“/AppOne”导入AppOne；
const主页=（）=>{
返回(
应用程序2-应用程序1的包装器


这也是App2
);
};
导出默认主页；

很好用。我唯一担心的是，我可能会遇到一些与react的冲突，因为我正在使用2个react应用程序，但目前我没有看到任何错误。

我想这是另一个问题的问题

编辑：
如果有人会使用这种方法，您应该注意，这种方法只适用于第一次加载。因为组件将重新呈现自身后，绑定的脚本将不会再次运行。
我似乎收到了相同的错误。你能详细说明我应该在代码中更改什么吗？
{
  ...
  "libraryTarget": "umd"
}

import React from 'react';

class AppOne extends React.Component {

  componentDidMount() {
    require('../app1/app1Bundle.js');
  }

  render() {
    return (
      <div id="app1"></div>
    );
  }
}
export default AppOne;

import React from 'react';
import AppOne from './AppOne';

const HomePage = () => {
  return (
    <div>
      <h1>App 2 - wrapper for app1</h1>
      <hr />
      <AppOne />
      <hr />
      <h1>This is App2 as well </h1>
    </div>
  );
};

export default HomePage;