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

Posted 2023-02-22

【中文标题】Webpack：如何使用动态捆绑组合两个完全独立的捆绑包

【英文标题】：Webpack: How can I combine two completely separate bundles using dynamic bundling

【发布时间】：2017-07-15 23:00:53

【问题描述】：

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

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

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

【问题讨论】：

只是为了提供文档：webpack.js.org/guides/author-libraries

【参考方案1】：

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

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

?

如果是，请继续阅读。

“这在 react 中可能吗？” 问题应该改为 “这在 Webpack 中可能吗？”，答案是 “是”。以下是使用 Webpack 2 测试的，但也应该适用于 v.1。

让我们将您的项目称为 Lib（您的 React 组件库）和 App（库使用者）。

在Lib 项目中：

创建一个入口点文件，比如index.js，它可以像这样导出所有自定义 React 组件：

import Button from './button';
import DatePicker from './DatePicker';
import TextBox from './textBox';

export const MyComponentLib = 
    Button,
    DatePicker,
    TextBox
;

更新webpack.config.js 使项目的包成为UMD 库（也可以是'var'），并将入口点设置为上述index.js 文件。这样做会在稍后的消费应用中通过名为 MyComponentLib 的全局变量（名称来自上面的 export）使您的库可用：

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

转到App 项目：

在index.html 文件中，您将有两个<script> 标签：一个用于mylib.bundle.js（Lib 项目的输出），另一个用于App 项目本身的捆绑包。你可能有更多的捆绑包（应用程序、供应商等），我只是在这里简化一些事情。

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

...
externals: 
    myComponents: 'MyComponentLib'
, 
...

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

import DatePicker from 'myComponents';

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

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

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

【讨论】：

有没有办法动态地做到这一点？例如，我们有一堆组件库，我们只想使用一个。我的用例是我要使用的组件的名称来自 props。然后我会异步加载 .js 并使用它。我不想每次创建新库时都编译主项目的源代码。

@JesúsFuentes - 看看dll-plugin。

@Eliran Malka 这不符合我的要求。无论如何，我正在测试github.com/muicss/loadjs

我终于成功了，@EliranMalka。 ***.com/questions/46845792/…