如何添加 UMD 以便我可以在浏览器中使用我的模块并作为 NPM 模块？答案

【问题标题】：How can I add UMD so I can use my module in the browser and as an NPM module?如何添加 UMD 以便我可以在浏览器中使用我的模块并作为 NPM 模块？
【发布时间】：2018-05-15 14:55:48
【问题描述】：

我正在尝试使我的 NPM 模块在浏览器中工作，但我在理解 UMD 语法时遇到了一些问题。这是我对模块的要求，我将其称为 Mod。

我需要能够从浏览器的其他文件中调用Mod的子函数，例如Mod.DoSomething()、Mod.Utils.DoSomethingElse()等
它需要与 Webpack、Browserify、RequireJS 等配合使用。
我需要能够将它作为 NPM 包中的一个模块，就像任何其他包一样。 var mod = require('mod'); var returnedVal = Mod.DoSomething;

我没有任何依赖项，但我希望有一个示例说明如何在有依赖项和没有依赖项的情况下执行此操作。我的主要问题之一是如何导出子函数，因此请将它们包含在示例中。谢谢！

【问题讨论】：

这是 2018 年的一个奇怪问题：UMD 不再是流行格式，仅仅是因为 AMD 不再流行。使用 CommonJS（绝大多数 npm 模块 - 通过 browserify 在浏览器中工作）或 ES6 模块（两者都可以工作，并且是未来的一个不错的选择，但有一些限制，例如不能导出单个函数）。

标签： javascript node.js npm browserify umd

【解决方案1】：

我最近遇到了同样的情况，所以即使这是一个老问题，我还是想分享我的经验。

我使用 webpack 并让我的 npm 模块在浏览器中工作，我能找到的解决方案是设置 webpack output setting libraryTarget: 'umd', check this article for details

但是我读那篇文章后犯的一个错误是我误解了 umd 和 es6 模块之间的关系，认为它们基本上是相同的。检查我自己的问题以获取详细信息ES6 modules via script tag has the error "The requested module does not provide an export named 'default' "

关于我应该在浏览器中使用哪个模块我想在这里引用一个答案https://stackoverflow.com/a/55659242/301513

今天，最有可能的答案是：使用 UMD 模块。有一段时间在未来可能是：使用 ECMAScript 模块；但我们还没有（2019 年）就如何分配达成共识。

【讨论】：