293

我正在创建我的第一个 Bower 组件。运行bower init脚本后问我“这个包暴露了哪些类型的模块？” 使用这些选项：

  • AMD
  • es6
  • 全局变量
  • 节点

这些选项有什么区别？

4

3 回答 3

121

如果您不知道，那么 globals 很可能是您的正确答案。

无论哪种方式，您都需要了解：

[更新]

此功能是最近在 bower 中引入的，并且根本没有记录（AFAIK）。它基本上描述了moduleType，它说明了该包打算使用的模块技术（见上文）。

现在，除了在包的文件中设置moduleType属性之外，它没有任何作用。bower.json

有关原始拉取请求，请参阅https://github.com/bower/bower/pull/934 。

[更新#2]

补充几点，回答评论：

  • 现在 AFAIK 没有对该moduleType财产进行验证 - 这意味着人们在技术上可以使用他们想要的任何价值，包括angularjs他们是否愿意这样做
  • 鲍尔委员会似乎并不热衷于包含额外的（non-interoperable/proprietary moduleTypes想想作曲家、角度等）——这很容易理解，但再一次，没有什么能真正阻止人们使用moduleType他们想要的价值
  • 前一个例外是（有点）最近包含yui moduleType，因此，假设它们是协调计划的一部分，则存在“例外”

如果我要为未列出的包管理器编写包并将其发布到 bower，我会怎么做？

我会编写一个 es6 模块，并使用 /patch es6-transpiler来输出我需要的包格式。然后我会/和：

  • 请求凉亭人将我的包技术作为选择（基于它被 es6-transpiler 支持作为目标的事实）
  • 发布我的包，包括它的 es6 模块版本和它的转译 XXX 版本，并es6用作moduleType

免责声明：我没有编写 angularjs 模块的实际经验。

于 2014-03-27T09:42:25.403 回答
27

最初的

我bower init也是第一次用。

这些选项应该是指模块化一些 JavaScript 代码的不同方法：

  • amd：使用 AMD define，例如 requirejs。
  • 节点：使用 Node.js require。
  • globals：使用 JavaScript 模块模式来公开一个全局变量（如 window.JQuery）。
  • es6：使用即将推出的 EcmaScript6 模块功能。

就我而言，我编写了一个 Node.js 模块dflow，但我使用 browserify 创建了一个导出全局dflow var:的dist/dflow.js文件：所以我选择了globals。

其他更新

我用来将dflow 浏览为窗口全局对象的命令是

browserify -s dflow -e index.js -o dist/dflow.js

我改变了它，因为我更喜欢在浏览器中使用require，所以现在我正在使用

browserify -r ./index.js:dflow -o dist/dflow.js

所以我在bower.json文件中将 bower.moduleType更改为node 。

主要动机是，如果我的模块名称有破折号，例如我的项目flow-view，我需要将flowView中的全局名称骆驼化。

这种新方法还有两个好处：

  1. 节点和浏览器界面是一样的。在客户端和服务器端都使用require，让我只编写一次代码示例，并在两个上下文中轻松重用它们。
  2. 我使用 npm 脚本，因此，我可以利用${npm_package_name}变量并编写一次用于浏览器化的脚本。

这是另一个主题，但是，你真的值得考虑后一个好处是如何有用的：让我分享一下npm.scripts.browserify我在package.json中使用的属性

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

于 2014-11-06T10:39:56.840 回答
7

仅供参考，这正是 bower 针对模块类型指定的内容：

mainJavaScript 文件中定义的模块类型。可以是以下字符串之一或数组：

  • globals：添加到全局命名空间的 JavaScript 模块，使用window.namespace或this.namespace语法
  • amd: 与 AMD 兼容的 JavaScript 模块，如RequireJS，使用define()语法
  • node:使用语法与node和CommonJS兼容的 JavaScript 模块module.exports
  • es6：与ECMAScript 6模块兼容的 JavaScript 模块，使用export和import语法
  • yui: 与YUI Modules兼容的 JavaScript 模块，使用YUI.add()语法

相关链接：https ://github.com/bower/spec/blob/master/json.md#moduletype

于 2016-02-08T12:25:39.853 回答