Bower init-AMD，ES6，全局变量和节点之间的区别

291

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

d
es6
全球
节点

这些选项之间有什么区别？

— 费利斯
source

121

如果您不知道，那么全局变量很可能是您的正确答案。

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

[更新]

此功能是在Bower中最近引入的，至今尚未记录（AFAIK）。它从本质上描述了moduleType，指出了要使用哪种模块技术（请参见上文）。

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

请参阅https://github.com/bower/bower/pull/934了解原始的pull-request。

[更新＃2]

其他几点，以回答评论：

目前AFAIK尚未对该moduleType物业进行验证-这意味着技术上允许人们使用他们想要的任何价值，包括angularjs他们是否愿意这样做
在凉亭委员会似乎并不热衷向包括额外的non-interoperable/proprietary moduleTypes（认为作曲家，角，等等） -这是很容易理解的，但再一次，没有什么阻止人们使用moduleType他们想要的价值
上一个例外是，最近才包含yui moduleType，因此，假设它们是一致计划的一部分，则要进行“例外”

如果我为一个未列出的软件包管理器编写一个软件包并将其发布在bower上，该怎么办？

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

请凉亭的人选择将我的包装技术包括在内（基于es6-transpiler支持的事实）
发布我的软件包，包括它的es6模块版本和它的已编译XXX版本，并es6用作moduleType

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

— 纠结的道依茨
source

4

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

1

我在帖子中更新了有关“与不受支持的程序包管理器怎么办”问题的其他想法-再次，此字段不是强制性的，或目前不用于任何事情-其值仅提供参考。至于angularjs本身，我可能会使用globals，是的，但请阅读我的更新。希望能有所帮助。

— Mangled Deutz 2014年

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

— PrairieProf 2014年

27

初始

我bower init也是第一次使用。

这些选项应引用模块化某些JavaScript代码的不同方法：

amd：使用AMD define，例如requirejs。
节点：使用Node.js的require。
全局变量：使用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.moduleType到节点在我bower.json文件。

其主要动机是，如果我的模块名称有一个破折号，例如我的项目流程视图，我需要camelize在全局名称flowView。

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

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

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

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

— Gianluca Casati
source

1

您实际上可以在define内部使用require：

define(function(require, exports, module) {   "use strict";    module.exports = {     Collection: require("./collection"),     View: require('./view')   }; });

— Doron Segal

7

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

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

globals：使用window.namespace或this.namespace语法添加到全局名称空间的JavaScript模块

amd：使用语法与AMD兼容的JavaScript模块（例如RequireJS）define()

node：使用语法与node和CommonJS兼容的JavaScript模块module.exports

es6：与ECMAScript 6模块兼容的JavaScript模块，使用export和import语法

yui：使用语法与YUI模块兼容的JavaScript模块YUI.add()

— t
source