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

bower init - difference between amd, es6, globals and node

提问by pherris

I am creating my first Bower component. After running bower initthe script asks me 'what types of modules does this package expose?' with these options:

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

• amd
• es6
• globals
• node

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

what is the difference between these options?

这些选项有什么区别？

采纳答案by Mangled Deutz

If you don't know, it's quite likely globals is the right answer for you.

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

Either way, you need to understand:

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

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

• AMD 是什么以及为什么
• 什么是 nodejs 模块
• 什么是 ecmascript 6，尤其是 es6 模块

[UPDATE]

[更新]

This feature was introduced very recently in bower and is not documented at all yet (AFAIK). It essentially describes the moduleType, which states for what module technology the package is meant to be consumed (see above).

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

Right now, It doesn't have any effect apart from setting the moduleTypeproperty in the bower.jsonfile of the package.

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

See https://github.com/bower/bower/pull/934for the original pull-request.

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

[UPDATE #2]

[更新#2]

A few additional points, to answer comments:

补充几点，回答评论：

• right now AFAIK there is no validation done on the moduleTypeproperty - which means that people are technically allowed to use whatever value they want for it, including angularjsif they feel inclined to do so
• the bower committeeseems to not be keen toward the inclusion of additional non-interoperable/proprietary moduleTypes(think composer, angular, etc) - which is easily understandable, but yet again, nothing really prevents people from using the moduleTypevalue they want
• an exception to the previous is the (somewhat) recent inclusion of the yui moduleType, so, there are "exceptions" to be made, assuming they are part of a concerted plan

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

What I would do if I were to author a package for a not-listed package manager and publish it on bower?

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

I would author an es6 module, and use / patch es6-transpilerto output the package format I need. Then I would either/and:

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

• petition the bower guys to include my package technology as a choice (based on the fact it's supported by es6-transpiler as a target)
• publish my package including both the es6 module version of it and the transpiled XXX version of it, and use es6as a moduleType

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

Disclaimer: I don't have real-life experience authoring angularjs modules.

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

回答by Gianluca Casati

Initial

最初的

I'm using bower initfor first time too.

我bower init也是第一次用。

The options should refer to the different ways to modularize some JavaScript code:

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

• amd: using AMD define, like requirejs.
• node: using Node.js require.
• globals: using JavaScript module pattern to expose a global variable (like window.JQuery).
• es6: using upcoming EcmaScript6 module feature.

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

In my case I wrote a Node.js module dflowbut I'm using browserify to create a dist/dflow.jsfile that exports a global dflowvar: so I selected globals.

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

Other Updates

其他更新

The command I used to browserify dflowas a windowglobal object was

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

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

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

I changed it cause I prefer to use requirealso inside the browser, so now I am using

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

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

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

and so I changed the bower.moduleTypeto nodein my bower.jsonfile.

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

The main motivation was that if my module name has a dash, for example my project flow-view, I need to camelizethe global name in flowView.

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

This new approach has two other benefits:

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

1. Node and browser interface are the same. Using requireon both client side and server side, let me write only once the code examples, and reuse them easily on both contexts.
2. I use npm scripts and so, I can take advantage of ${npm_package_name}variable and write once the script I use to browserify.

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

This is another topic, but, it is really worth that you consider how it is useful the latter benefit: let me share the npm.scripts.browserifyattribute I use in my package.json

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

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

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

回答by Wtower

Just for reference, this is precisely what bower specifies regarding the module types:

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

The type of module defined in the mainJavaScript file. Can be one or an array of the following strings:

• globals: JavaScript module that adds to global namespace, using window.namespaceor this.namespacesyntax
• amd: JavaScript module compatible with AMD, like RequireJS, using define()syntax
• node: JavaScript module compatible with nodeand CommonJSusing module.exportssyntax
• es6: JavaScript module compatible with ECMAScript 6 modules, using exportand importsyntax
• yui: JavaScript module compatible with YUI Modules, using YUI.add()syntax

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

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

Relevant link: https://github.com/bower/spec/blob/master/json.md#moduletype

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