發布到 NPM 和 CDN

Question

這是我第一次編寫一個非常基本的 JavaScript 庫，現在我打算發布它。 我將其編寫為 function，用戶只需通過 CDN 導入 JavaScript 文件即可。 我也打算將它發布到 NPM，以便用戶也可以將它與 JS 捆綁器一起使用。

我創建了另一個文件來匹配 Node.js 格式，基本上，我在 function 之前添加了module.exports = ，這一切都正常。 所以，現在我得到了兩個代碼基本相同的文件，一個用於 CDN，一個用於 NPM。 有沒有辦法統一這個，基本上將它們全部合並到同一個文件中？

我真的很想知道這通常是如何完成的。 當一個 function 被寫入作為 CDN 導入時，它如何轉換為節點模塊？ 創建一個單獨的文件是唯一的方法，還是我遺漏了什么？

Answer 1

這個問題可以通過快速的谷歌搜索輕松回答，但我認為這是一個有趣且寫得很好的問題，所以我在這里抄錄一些結果以幫助其他人：

從這篇博文：

UMD

UMD（通用模塊定義）是我們可以用來包裝我們的庫的代碼塊。 這段代碼可以在前端和 Node.js 中使用庫。

它看起來像這樣：

 (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['b'], factory); } else if (typeof module === 'object' && module.exports) { // Node. module.exports = factory(require('b')); } else { // Browser globals (root is window) root.returnExports = factory(root.b); } }(typeof self?== 'undefined': self, this. function (b) { // Use b in some fashion. // Just return a value to define the module export, // This example returns an object. but the module // can return a function as the exported value; return {}; }));

您可以在此處閱讀有關 UMD 的更多信息。

通常我會建議您使用捆綁器/構建工具為您自動執行此操作，並使代碼在更多環境中可用。

Webpack是一個不錯的選擇。