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