javascript - 导入或需要一个由 React 应用程序创建的捆绑的 js 文件

Question

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

<div 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>
            );
        };`

这不起作用，因为我收到一些关于以下内容的错误:

Uncaught Error: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

当我访问这个网站时，我看到:

_registerComponent(...): Target container is not a DOM element.

但是，如果他们在他们的组件之外使用这个文件 (myBundle.js)(例如顶级 index.html)，它当然会工作得很好。

编辑:我忘了说，我想我知道问题出在哪里，应用程序没有准备好带有此 div 的 HTML然而。但我不知道等待它存在的好方法。

按照@Frxstrem 的回答编辑#2:我正在尝试遵循这个答案，但我认为我做错了。我有 2 份 corry house slingshot demo app作为 app1 和 app2。更改了 webpack.config.prod.js 上的“输出” app1 到:

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'app1Bundle.js',
    library: "App1",
    libraryTarget: "umd"
  },

我正在尝试在 app2 的主页组件中呈现 app1。所以我将“已发布”文件从 app1 复制到 app2 的根目录并调用文件夹 app1，然后添加导入调用:

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

和返回函数中的匹配标签:

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

我收到与上面发布的相同的错误。

我也尝试了不同的组合:

import app1 from '../../app1/app1Bundle'; // without curly braces

甚至只是将脚本作为普通的 js 脚本获取

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

或者 require('../../app1/app1Bundle');

然后尝试渲染一个id为“app1”的普通div标签

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

似乎没有任何效果，因为我仍然遇到同样的错误。我认为问题在于脚本加载的时间和元素的渲染。我认为当捆绑脚本正在搜索时，div 还不存在。

Answer 1

默认情况下，Webpack 会将入口模块公开为一个变量，这在您包含带有 <script> 的脚本时很有用。标签。 (因此，如果你 require 它你可能只会得到 {} 。)但是，如果你想从其他模块加载你的包，你需要告诉 Webpack 将它公开为导出模块。

最简单的方法是设置

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

在您的 Webpack 配置中。有了它，Webpack 知道它应该将您的入口模块公开为 Webpack 可能需要的模块，但也可以用 <script> 加载。根据需要标记。

Webpack libraryTarget documentation