javascript - 如何添加 UMD 以便我可以在浏览器中使用我的模块并将其用作 NPM 模块?

标签 javascript node.js npm browserify umd

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

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

我没有任何依赖关系,但我希望能举个例子说明如何在有依赖关系和没有依赖关系的情况下做到这一点。我的主要问题之一是如何导出子函数,因此请将它们包含在示例中。谢谢!

最佳答案

我最近遇到了同样的情况,所以尽管这是一个老问题,但我还是想分享一下我的经验。

我使用 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

Today, the most likely answer is: use the UMD module. Some time in the future it may be: use ECMAScript modules; but we don't yet (2019) have consensus on how those will be distributed.

关于javascript - 如何添加 UMD 以便我可以在浏览器中使用我的模块并将其用作 NPM 模块?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50353372/

相关文章:

angular - 为什么 Angular 包是分开的,为什么我们需要它们

node.js - nvm 在新的终端 session 中保留 "forgetting" Node

node.js - 在 Windows 10 上使用 npm install -g ionic cordova 安装 ionic 时出错

带多个按钮的 Javascript 对话框

javascript - 谷歌图表结合了折线图和烛台图

php - NodeJS 推送队列,由 Laravel worker 使用

node.js - 部署到云时无法将实体添加到 Node.js 中的 Azure 存储表中?

javascript - jQuery DataTables 仅过滤特定列

javascript - 循环order.find、收集并向前端发送大量数据。方法不好?

node.js - 如何向 Meteor 中当前登录的用户添加外部服务数据