如何添加 UMD 以便我可以在瀏覽器中使用我的模塊並將其用作 NPM 模塊？

Question

我試圖讓我的 NPM 模塊在瀏覽器中工作，但我在理解 UMD 語法時遇到了一些麻煩。 這是我對模塊的要求，我將其稱為 Mod。

• 我需要能夠從瀏覽器中的其他文件調用 Mod 的Mod.DoSomething() ，例如Mod.DoSomething() 、 Mod.Utils.DoSomethingElse()等
• 它需要與 Webpack、Browserify、RequireJS 等配合得很好。
• 我需要能夠將它作為 NPM 包中的一個模塊，就像任何其他包一樣。 var mod = require('mod'); var returnedVal = Mod.DoSomething;

我沒有任何依賴項，但我很想知道如何在有和沒有依賴項的情況下執行此操作的示例。 我的主要問題之一是如何導出子函數，因此請在示例中包含它們。 謝謝！

Answer 1

我最近經歷了同樣的情況，所以即使這是一個老問題，我也想分享我的經驗。

我使用 webpack 並使我的 npm 模塊在瀏覽器中工作，我能找到的解決方案是設置webpack 輸出設置libraryTarget: 'umd' ， 查看這篇文章了解詳細信息

但是我在閱讀那篇文章后犯的一個錯誤是我誤解了 umd 和 es6 模塊之間的關系，認為它們基本相同。 檢查我自己的問題以獲取詳細信息ES6 模塊通過腳本標記有錯誤“請求的模塊不提供名為‘默認’的導出”

關於我應該在瀏覽器中使用哪個模塊我想在這里引用一個答案https://stackoverflow.com/a/55659242/301513

今天，最可能的答案是：使用 UMD 模塊。 未來某個時候可能是：使用 ECMAScript 模塊； 但我們還沒有（2019 年）就這些將如何分配達成共識。