Webpack：如何使用动态捆绑将两个完全独立的捆绑在一起 [英] Webpack: How can I combine two completely separate bundles using dynamic bundling

问题描述

我花了很多时间对此进行研究，但无济于事。我知道使用 import promise API在Webpack中如何进行代码拆分和动态捆绑。

I have spent a lot of time looking into this, but to no avail. I am aware of how code splitting and dynamic bundling works in Webpack using the import promise API.

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

Howevr, my use case is that I have two completely separate bundles, generated separately using different webpack builds. To give you perspective, I am building React components and there is a requirement to dynamically load a react component into the page that has been compiled in a different process. Is this possible in react? I do have control over both webpack builds, so I can exclude dependencies, etc.

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

Update: I just looked at Vue.js, and how it allows developers to register Vue.js components and then reference them later in the code. I could potentially load my Vue.js component scripts before my page script. I'm trying to see if I can do something similar in React.

推荐答案

我正确理解了您的意思：您基本上已经

Did I understand you correctly: you have essentially got

1. 自定义React组件库（由Webpack build＃1构建）


2. 一个React应用需要使用其中的某些（全部）组件（由Webpack版本2构建，与＃1完全分开）

？

如果是，请继续阅读。

If yes, then read on.

这可能在反应中吗？ 问题应该改为在Webpack中这可能吗？ ，答案是是 。以下内容已在Webpack 2上进行了测试，但也应与v.1。一起使用。

The "Is this possible in react?" question should instead be "Is this possible in Webpack?", and the answer is "Yes". The following is tested with Webpack 2, but should also work with v.1.

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

Let's call your projects Lib (your React component library) and App (the library consumer).

在 Lib 项目：

1. 创建一个入口点文件，例如 index。 js ，它会像这样导出所有自定义的React组件：

1. Create an entry point file, say index.js, that exports all the custom React components like this:

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 ）使您的库可用。稍后使用应用程序：

Update webpack.config.js to make the project's bundle a UMD library (could also be 'var'), and set the entry point to the above index.js file. Doing so will make your library available via a global variable named MyComponentLib (the name comes from the export above) in the consuming app later on:

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

在到 App 项目：

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

1. In the index.html file you will have two <script> tags: one for mylib.bundle.js (the output of the Lib project), and another for the bundle of the App project itself. You might have more bundles (app, vendor etc.), I'm just simplifying things here.

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

Update webpack.config.js to mark the component library as external dependency. Here, MyComponentLib is, again, the name of the global variable the library is available at, and myComponents is the name to use in import statements:

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

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

Now, in App you can import a component like this:

import {DatePicker} from 'myComponents';

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

This will dynamically load DatePicker from the component library at run time via the global variable.

奖金：如果使用 eslint ，则您不希望它抱怨缺少已知外部模块的情况；将其添加到您的 .eslintrc ：

Bonus: if you use eslint, you don't want it to complain about missing modules that you know are external; add this to your .eslintrc:

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

这篇关于Webpack：如何使用动态捆绑将两个完全独立的捆绑在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！