reactjs - Webpack:如何使用动态捆绑组合两个完全独立的 bundle

Question

我花了很多时间研究这个问题，但没有结果。我知道如何使用 import Promise API 在 Webpack 中进行代码分割和动态捆绑。

但是，我的用例是我有两个完全独立的包，使用不同的 webpack 版本分别生成。为了给您提供视角，我正在构建 React 组件，并且需要将 React 组件动态加载到已在不同进程中编译的页面中。这在 react 中可能吗？我确实可以控制两个 webpack 构建，因此我可以排除依赖项等。

更新:我刚刚了解了 Vue.js，以及它如何允许开发人员注册 Vue.js 组件，然后在代码中引用它们。我可能会在页面脚本之前加载 Vue.js 组件脚本。我正在尝试看看是否可以在 React 中做类似的事情。

Answer 1

我对你的理解正确吗:你基本上已经得到了

1. 自定义 React 组件库(由 Webpack build #1 构建)
2. 需要使用其中一些(全部)组件的 React 应用(由 Webpack 版本 #2 构建，与 #1 完全独立)

？

如果是，请继续阅读。

“这在 React 中可能吗？” 问题应该是“这在 Webpack 中可能吗？”，答案是"is".以下内容是使用 Webpack 2 进行测试的，但也应该适用于 v.1。

让我们将您的项目命名为 Lib (你的 React 组件库)和 App (图书馆消费者)。

在 Lib项目:

1. 创建一个入口点文件，例如 index.js ，导出所有自定义 React 组件，如下所示:

   import {Button} from './button';
   import {DatePicker} from './DatePicker';
   import {TextBox} from './textBox';
   
   export const MyComponentLib = {
       Button,
       DatePicker,
       TextBox
   };
   

2. 更新webpack.config.js使项目的 bundle 成为 UMD 库(也可以是“var”)，并将入口点设置为上面的 index.js文件。这样做将使您的库通过名为 MyComponentLib 的全局变量可用。 (名称来自上面的 export)稍后在消费应用程序中:

    ...
    output: {
        path: './dist',
        filename: 'mylib.bundle.js',
        libraryTarget: 'umd'
    },
    ...
    entry: './index.js',
    ...
   

前往 App项目:

1. 在 index.html文件你将有两个 <script>标签: 一个 mylib.bundle.js (Lib 项目的输出)，另一个用于 App 的 bundle 项目本身。您可能有更多的 bundle (应用程序、 vendor 等)，我只是在这里简化事情。

2. 更新webpack.config.js将组件库标记为外部依赖项。在这里，MyComponentLib同样，库可用的全局变量的名称，并且 myComponents是 import 中使用的名称声明:

   ...
   externals: {
       myComponents: 'MyComponentLib'
   }, 
   ...
   

现在，在 App您可以像这样导入组件:

import {DatePicker} from 'myComponents';

这将在运行时通过全局变量从组件库动态加载 DatePicker。

奖励:如果您使用 eslint ，您不希望它提示缺少您知道的外部模块；将此添加到您的 .eslintrc :

...
"settings": {
      "import/core-modules": ["myComponents"]
},
...