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

Question

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

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

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

Answer 1

我是否理解你:你基本上得到了

1. 自定义React组件库(由Webpack build#1构建)
2. 一个React应用程序,需要使用一些(所有)这些组件(由Webpack build#2构建,完全独立于#1)

？

如果是,请继续阅读.

该"这是可能的反应呢？" 问题应该是"在Webpack中这可能吗？" ,答案是"是".以下是使用Webpack 2进行测试的,但也应该与v.1一起使用.

让我们调用您的项目Lib(您的React组件库)和App(库使用者).

在Lib项目中:

1. 例如,创建一个入口点文件,index.js导出所有自定义React组件,如下所示:

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