bower init - amd、es6、globals 和 node 之间的区别

Posted 2023-02-22

【中文标题】bower init - amd、es6、globals 和 node 之间的区别

【英文标题】：bower init - difference between amd, es6, globals and node

【发布时间】：2014-05-05 14:58:20

【问题描述】：

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

amd es6 全局变量 节点

这些选项有什么区别？

【参考方案1】：

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

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

what is and why AMD what is a nodejs module what is ecmascript 6 and especially es6 modules

[更新]

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

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

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

[更新 #2]

补充几点，回答cmets：

目前 AFAIK 没有对 moduleType 属性进行验证 - 这意味着技术上允许人们使用他们想要的任何值，包括 angularjs 如果他们愿意这样做 bower committee 似乎并不热衷于包含额外的non-interoperable/proprietary moduleTypes（想想作曲家、角度等）——这很容易理解，但再一次，没有什么能真正阻止人们使用他们所使用的moduleType 值想要 之前的一个例外是（有点）最近包含的yui moduleType，因此，假设它们是part of a concerted plan，则存在“例外”

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

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

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

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

【讨论】：

全局变量是创建 AngularJS 模块/包的正确答案吗？

我更新了我的帖子，补充了关于“如何处理不受支持的包管理器”这个问题的更多想法——再一次，这个字段现在不是强制性的或用于任何事情——它的价值只是提供信息。至于angularjs 本身，我可能会使用globals，是的，但请阅读我的更新。希望对您有所帮助。

我正在使用节点。这是否意味着我要公开节点模块？我也在使用 angular，当我注意到我有一条消息告诉我“没有要保存到的 bower.json 文件，使用 bower init 创建一个”时，我正在使用 bower 安装它。 （或者，如果这是一个单独的问题，我可以写一个问题。我认为这可能是一个合适的评论，因为它与您的答案有关。谢谢！）

【参考方案2】：

初始

我也是第一次使用bower init。

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

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

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

其他更新

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

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，我需要camelize flowView 中的全局名称。 p>

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

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

这是另一个话题，但是，确实值得您考虑后者的好处：让我分享我在 package.json 中使用的npm.scripts.browserify 属性

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

【讨论】：

您实际上可以在 define 中使用 require for ex：define(function(require, exports, module) "use strict"; module.exports = Collection: require("./collection"), View: require('./view') ; );

【参考方案3】：

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

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

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

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