如何爲已經模塊化的庫構建獨立的外部依賴js文件？

基本上我有許多遺留的Web應用程序引用和使用來自CDN的庫（Kendo UI）。我有一個任務是將這些請求移除到遠程主機，因此我想將庫合併到現有的npm腳本任務中，該任務將所有依賴關係收集到應用程序引用的單個本地js文件中。如何爲已經模塊化的庫構建獨立的外部依賴js文件？

時遇到的問題是，this library不提供可立即使用（不像其它的庫如jQuery或角度）預編譯的JS文件，但它是模塊化的，並且需要的WebPack或browserify使用它。

由於我們的遺留應用程序不使用模塊化方法來加載依賴關係，而且我也沒有範圍來重寫它們，所以我想以某種方式將模塊化庫打包到等效的js文件中，以便加載庫，以便我的應用程序可以只需通過<script>即可訪問它。

我一直在使用browserify從包含一個簡單的require參考庫，但隨後引用在我的申請結果的編譯文件中的錯誤作爲圖書館的功能不可用我的應用程序源js文件編譯嘗試。

任何人都可以指向正確的方向嗎？

來源

2017-09-26 Rich Browne

你在正確的軌道使用webpack，你只需要暴露圖書館的。如果這個lib純粹是基於模塊的，你將不得不自己創建一個全局名稱，例如。 jQuery爲你的Kendo UI做了jQuery＆$，也許你可以將它暴露給全局的kendoUI等。 – Keith

謝謝Keith。我不確定這是否只是kendo的一些怪癖，但似乎全局變量'kendo'是由我上面提到的browserify編譯文件設置的，但是jQuery擴展函數（例如'$（...）.kendoDropDownList （）'）全局不可用（它們在我用browserify編譯的js文件中可用）。有任何想法嗎？ –

是的，你很可能有jQuery作爲kendu UI內的依賴關係。默認情況下，你會得到2個版本的jQuery。你在這裏做的是安裝webpack，以便jQuery是外部的。在你的webpack配置裏面，把'externals：{jquery：「jQuery」} ,.注意小寫的jquery，通常在節點中我們保持require的小寫，但如果Kendu UI確實需要（'jQuery'），則需要修改。 – Keith

如果你使用一些基於模塊的庫，並且你想單獨使用它們，你需要做2件事情。

模塊暴露在全球範圍內。也許使用Expos loader https://github.com/webpack-contrib/expose-loader或甚至只是分配給窗口對象。
如果模塊也在使用您也包括獨立的庫，那麼您需要告訴webpack關於這些的信息。

例如，

{ 
    externals: { 
    jquery: 'jQuery' 
    } 
    // other stuff.. 
}

最後，當您包含這些內容時，請記住腳本標記的排序。例如。確保你在綁定的javascript之前包含jquery。

來源

2017-09-26 10:53:05 Keith

偉大的東西，謝謝基思。 –

如何爲已經模塊化的庫構建獨立的外部依賴js文件？

回答

相關問題