Webpack：我如何将两个完全独立的包捆绑在一起使用动态绑定

Question

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

不过，我的用例是我有两个完全独立的包，分别使用不同的webpack构建生成。为了给您提供透视，我正在构建React组件，并且需要将反应组件动态加载到已在不同进程中编译的页面中。这是可能的反应吗？我必须控制在两个的WebPack版本，所以我可以排除相关性等

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

Answer 1

难道我理解正确的话：你已经基本上得到了

1. 定制库反应的组分（通过的WebPack建建＃1）
2. 一个作出反应的应用程序，需要使用一些（全部）的这些组件（由Webpack build＃2构建，完全独立于＃1）

？

如果是，则继续阅读。

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

让我们打电话给您的项目Lib（您的React组件库）和App（库消费者）。

在Lib项目：

1. 创建的切入点文件，说index.js，即出口所有自定义反应的组分是这样的：

   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"] 
}, 
...