如何添加 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 年）就这些将如何分配达成共识。