如何添加UMD，以便在浏览器中使用我的模块和NPM模块？

Question

我正在尝试让我的NPM模块在浏览器中工作，但我在理解UMD语法方面遇到了一些麻烦。以下是我对模块的要求，我将其称为Mod。

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

我没有任何依赖关系，但我很欣赏一个如何在有依赖和无依赖的情况下执行此操作的示例。我的一个主要问题是如何导出子函数，因此请在示例中包含它们。谢谢！

Answer 1

我最近也经历了同样的情况，因此即使我想分享我的经验也是一个老问题。

我使用webpack并使npm模块在浏览器中工作，我可以找到的解决方案是设置webpack output setting validationFunction，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）   关于如何分配这些内容的共识。