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

Question

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

node.jsbowerjs-amdecmascript-6

292

我正在创建我的第一个Bower组件。运行后，脚本会询问我“此软件包公开哪些类型的模块？”，并给出以下选项：

amd
es6
globals
node

这些选项有什么区别？

- pherris

3个回答

27

初始设置

我第一次使用 bower init。

这些选项指的是将某些JavaScript代码模块化的不同方式：

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

在我的情况下，我编写了一个Node.js模块dflow，但我使用browserify创建一个导出全局变量dflow的dist/dflow.js文件，因此我选择了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，我需要将全局名称flowView设为驼峰命名方式。

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

Node和浏览器的接口是相同的。在客户端和服务器端都使用require，让我只需要编写一次代码示例，就可以轻松地在两个上下文中重复使用。
我使用npm脚本，因此可以利用${npm_package_name}变量，并编写一次我用于browserify的脚本。

这是另一个话题，但是，你应该考虑一下后面那个好处的有用性：让我分享我在package.json中使用的npm.scripts.browserify属性

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

- Gianluca Casati

1

实际上，你可以在define内部使用require，例如：

define(function(require, exports, module) {
  "use strict";

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

- Doron Segal

7

仅供参考，这是Bower关于模块类型的具体规定：

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

globals：JavaScript模块，使用window.namespace或this.namespace语法将内容添加到全局命名空间中

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

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

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

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

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

- Wtower

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mangled Deutz · Accepted Answer

如果你不知道，很可能全局变量是正确答案。

无论如何，你需要理解：

[更新]

该功能是最近在Bower中引入的，并且尚未被记录（据我所知）。它基本上描述了moduleType，该属性表示用于消耗包的模块技术（请参见上文）。

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

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

[更新＃2]

为了回答评论中的一些问题，这里还有一些补充说明：

目前，据我所知，没有对moduleType属性执行验证-这意味着技术上允许人们使用他们想要的任何值，包括angularjs
Bower委员会似乎不喜欢包含其他非互操作/专有moduleTypes（考虑composer，angular等）-这很容易理解，但仍然没有什么阻止人们使用他们想要的moduleType值

先前的规则有一个例外，即（在某种程度上）最近添加了yui moduleType，因此，需要做出“例外”，假设它们是计划的一部分

假如我想为未列出的软件包管理器创建一个软件包并在Bower上发布，该怎么办？

我会编写一个es6模块，并使用/修补es6-transpiler来输出我所需的软件包格式。然后，我会：

请求Bower团队将我的软件包技术作为选择之一（基于它被es6-transpiler支持为目标）
发布我的软件包，包括es6模块版本和转换后的XXX版本，并将es6用作moduleType

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