Question

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

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

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

Answer 1

我是否理解你：你基本上已经

了

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

如果是，请继续阅读。

＆＃34;这可能是反应吗？＆＃34; 问题应该是＆＃34;这可能在Webpack中吗？＆＃34; ，答案是＆＃34;是＆＃34; 。以下是使用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库（也可能是＆＃39; var＆＃39;），并将入口点设置为上面{{1}文件。这样做会使您的库在以后的消费应用程序中通过名为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

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

奖励：如果你使用import {DatePicker} from 'myComponents';，你就不希望它抱怨你知道外部缺失的模块;将其添加到您的eslint：

.eslintrc

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

1 个答案: