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

我花了很多时间研究这个问题，但没有结果。我知道如何使用

import

promise API在Webpack中进行代码拆分和动态绑定

然而，我的用例是，我有两个完全独立的包，分别使用不同的webpack构建生成。为了给您一个透视图，我正在构建React组件，需要将React组件动态加载到在不同进程中编译的页面中。在react中这可能吗？我可以控制这两个网页包的构建，所以我可以排除依赖项，等等

---

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

我理解正确了吗：你基本上理解了

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

React应用程序需要使用部分（全部）这些组件（由Webpack build#2构建，完全独立于#1）

?

如果是，请继续阅读

“这在react中可能吗？”问题应该改为“这在Webpack中可能吗？”，答案是“是”。以下内容在Webpack2中进行了测试，但也应适用于v.1

让我们调用您的项目

Lib

（您的React组件库）和

App

（库使用者）

在

Lib

项目中：

创建一个入口点文件，例如

index.js

，该文件导出所有自定义组件，如下所示：

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

export const MyComponentLib = {
    Button,
    DatePicker,
    TextBox
};

import {DatePicker} from 'myComponents';

更新

webpack.config.js

以使项目的捆绑包成为UMD库（也可以是“var”），并将入口点设置为上述

index.js

文件。这样做将使您的库在以后的消费应用程序中通过名为

MyComponentLib

（名称来自上面的

export

）的全局变量可用：

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

进入

应用程序

项目：

在

index.html

文件中，您将有两个

标记：一个用于

mylib.bundle.js

（

Lib

项目的输出），另一个用于

App

项目本身的bundle。你可能有更多的捆绑包（应用程序，供应商等），我只是在这里简化事情

更新

webpack.config.js

以将组件库标记为外部依赖项。这里，

MyComponentLib

是库中可用的全局变量的名称，

myComponents

是在

import

语句中使用的名称：

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

现在，在

App

中，您可以导入如下组件：

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

export const MyComponentLib = {
    Button,
    DatePicker,
    TextBox
};

import {DatePicker} from 'myComponents';

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

好处：如果您使用

eslint

，您不希望它抱怨缺少您知道是外部的模块；将此添加到您的

.eslintrc

：

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

---

只是为了提供文档：有没有一种方法可以动态地做到这一点？例如，我们有很多组件库，我们只想使用一个。我的用例是，我想要使用的组件的名称来自于道具。然后异步加载.js并使用它。我不想每次创建新库时都编译主项目的源代码。@Jesúsfuents-看看。@Eliran Malka这不符合我的要求。“不管怎样，我正在测试我终于成功了，”EliranMalka说。