Webpack：如何使用动态捆绑组合两个完全独立的捆绑包

Question

我花了很多时间研究这个，但无济于事。我知道使用import promise API 在 Webpack 中代码拆分和动态捆绑是如何工作的。

然而，我的用例是我有两个完全独立的包，分别使用不同的 webpack 构建生成。为了让您了解，我正在构建 React 组件，并且需要将 React 组件动态加载到已在不同进程中编译的页面中。这可能反应吗？我确实可以控制两个 webpack 构建，所以我可以排除依赖等。

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

Answer 1

我的理解是否正确：你基本上明白了

1. 自定义 React 组件库（由 Webpack build #1 构建）
2. 需要使用部分（全部）这些组件的 React 应用程序（由 Webpack build #2 构建，与 #1 完全分开）

?

如果是，请继续阅读。

“这在 react 中可能吗？” 问题应该改为 “这在 Webpack 中可能吗？”，答案是 “是”。以下是使用 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 使项目的包成为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 项目本身的捆绑包。你可能有更多的捆绑包（应用程序、供应商等），我只是在这里简化一些事情。

2. 更新webpack.config.js 以将组件库标记为外部依赖项。这里，MyComponentLib 是库可用的全局变量的名称，myComponents 是在 import 语句中使用的名称：

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

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

import {DatePicker} from 'myComponents';

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

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

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