Question

假设我有一个使用redux和一些ajax调用的正常反应应用程序。如果我想将它传递给某人，我会向他们提供我用webpack创建的捆绑js文件，并要求他们将其包含在他们的HTML +中，使用 id ＆＃34; myApp＆＃渲染一个div 34;例如：

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

这不起作用，因为我遇到了一些错误：

未捕获错误：Minified React错误＃37;访问 http://facebook.github.io/react/docs/error-decoder.html?invariant=37 对于完整的消息或使用非缩小的开发环境来完整错误和其他有用的警告。

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

_registerComponent（...）：目标容器不是DOM元素。

但是，如果他们在组件之外使用此文件（myBundle.js）（例如顶层index.html），那么它当然会正常工作。

编辑：我忘了提到我认为我知道问题是什么，应用程序还没有准备好这个div的HTML。但我不知道一种良好的本土方式等待它的存在。

在@Frxstrem的回答后编辑＃2：我试图按照这个答案，但我认为我做错了。我有2个corry house slingshot demo app副本作为app1和app2。改变了输出＆＃39;在app1的webpack.config.prod.js上：

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

我试图在app2的主页组件中渲染app1。所以我复制了＆＃34;发表的＆＃34;文件从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';

或要求（＆＃39; ../../ APP1 / app1Bundle＆＃39）;

然后尝试渲染ID为＆＃34; app1＆＃34;

的普通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

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

1 个答案: