分別加載Angular 2及其依賴庫與多個webpack配置

我目前有一個角2應用程序正在使用webpack 2構建。我讓它忽略任何角或任何第三方庫，因爲我的意圖是讓那些加載/單獨維護在不同的webpack捆綁過程（不同的webpack配置比我的應用程序配置）。我想這樣做，以便可以更新這些庫，而無需在我的應用程序或使用這些庫的任何其他應用程序上重新運行webpack。我目前正在使用一個webpack DLL，但我仍然有一個問題，如果我更新該webpack DLL，應用程序仍然需要重新綁定，以便與新模塊id「重新同步」。隨着許多應用程序指向這個「核心」包，你可以想象這將是乏味的。我不希望這些經常改變，但我希望有這個自由。分別加載Angular 2及其依賴庫與多個webpack配置

當我運行應用程序時，出現錯誤，因爲我的應用程序代碼在角度庫中找不到東西，比如「輸出」，「輸入」等等。有誰知道我可以包括角度，rxjs，區域，核心-js，等等。無論是腳本標記，單獨的webpack包還是其他一些方法，並讓應用程序webpack包能夠了解這些庫並使用它們？像lodash這樣的工作很好，因爲它們作爲一個全局變量被加載，但以角度2我不能以同樣的方式得到它。

我已經嘗試創建一個webpack「供應商」捆綁包，只包含角2庫和它的依賴項，如區域和rxjs。我在輸出上設置了library屬性，並在應用程序webpack配置中嘗試使用libraryTarget和externals屬性。只有特定的代碼才能創建捆綁包，但應用程序無法在此「供應商」捆綁包中找到任何模塊。看起來，應用程序代碼中的導入語句無法找到此「供應商」包中的模塊。

如果有人想從我的webpack配置文件中看到部分，請隨時詢問。

來源

2017-01-27 DRiFTy

我設法找出了這一個。對於任何想要做同樣事情的人來說，這就是需要發生的事情。

您需要爲角度庫及其依賴關係中的每個umd模塊添加腳本標記，或者執行我所做的操作並創建一個吞嚥任務以按正確的順序連接這些庫並創建一個包含代碼的供應商文件並在腳本標記中引用它。

一旦你加載UMD模塊，然後你可以告訴你的WebPack配置忽略特定的模塊，並使用externals配置屬性它們委託給一個全局變量：

externals: [ 
    { 
     'hammerjs': 'Hammer', 
     'lodash': '_', 

     'core-js/es6': 'core', 
     'core-js/es7/reflect': 'core', 

     'zone.js/dist/zone': 'Zone', 

     '@angular/core': 'ng.core',    
     '@angular/compiler': 'ng.compiler', 
     '@angular/common': 'ng.common', 
     '@angular/platform-browser': 'ng.platformBrowser', 
     '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic',    
     '@angular/http': 'ng.http', 
     '@angular/router': 'ng.router', 
     '@angular/forms': 'ng.forms', 

     '@angular/flex-layout': 'ng.flexLayout', 
     '@angular/material': 'ng.material'    
    }, 
    function(context, request, callback) { 
     if (/^rxjs/.test(request)) { 
      return callback(null, 'Rx'); 
     } 

     callback(); 
    } 
],

這樣做有什麼說的WebPack是任何時候遇到這些導入之一時，請使用全局變量來引用它。現在存在全局變量，因爲我們使用umd文件並單獨加載這些文件。那裏的函數用於rxjs，並且在遇到以「rxjs」開頭的導入語句時使用全局變量Rx。

下面列出了umd文件，以防有人不知道這一點。這些文件是通過一個全局變量在不同的模塊裝載機可導入以及訪問：

// Third party JavaScript libs 
'./node_modules/hammerjs/hammer.min.js', // Required by @angular/material 
'./node_modules/lodash/lodash.min.js', 

// Polyfills (required by @angular/*) 
'./node_modules/core-js/client/shim.min.js', 
'./node_modules/zone.js/dist/zone.min.js', 

// RxJS 
'./node_modules/rxjs/bundles/Rx.min.js', // Required by @angular/* 

// Angular Framework (order matters) 
'./node_modules/@angular/core/bundles/core.umd.min.js', 
'./node_modules/@angular/common/bundles/common.umd.min.js', 
'./node_modules/@angular/compiler/bundles/compiler.umd.min.js', // Don't need this if using AoT... 
'./node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js', // Used for AoT 
'./node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', // Used for JiT 
'./node_modules/@angular/http/bundles/http.umd.min.js',  
'./node_modules/@angular/forms/bundles/forms.umd.min.js', 
'./node_modules/@angular/router/bundles/router.umd.min.js', 

// Third party Angular libraries 
'./node_modules/@angular/flex-layout/bundles/flex-layout.umd.js', 
'./node_modules/@angular/material/bundles/material.umd.js'

這個過程可以讓你改變「供應商」的JavaScript包，而無需在每個依賴於它的應用程序的WebPack運行。當然，如果需要新的功能，你需要在應用程序上運行webpack，但是如果不更改角度或其他外部庫而不更改，那麼這將很有用。唯一的缺點是樹型抖動現在不適用於供應商代碼......但它仍然適用於使用webpack的應用程序。

來源

2017-01-27 19:16:05 DRiFTy

分別加載Angular 2及其依賴庫與多個webpack配置

回答

相關問題