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

初始

我bower init也是第一次使用。

这些选项应参考模块化JavaScript代码的不同方法：

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

就我而言，我编写了一个Node.js模块dflow，但是我使用browserify创建了一个dist / dflow.js文件，该文件导出了一个全局dflow var：所以我选择了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。

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

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"

仅供参考，这正是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()

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