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

node.js Node.js

Pro路易

2020-03-19

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

  • d
  • es6
  • 全球
  • 节点

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

第2217篇《Bower init-AMD,ES6,全局变量和节点之间的区别》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
卡卡西樱 2020.03.19

初始

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"

卡卡西Near 2020.03.19

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

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

  • globals:使用window.namespacethis.namespace语法添加到全局名称空间的JavaScript模块
  • amd使用语法与AMD兼容的JavaScript模块,例如RequireJSdefine()
  • node使用语法nodeCommonJS兼容的JavaScript模块module.exports
  • es6:与ECMAScript 6模块兼容的JavaScript模块,使用exportimport语法
  • yui使用语法YUI模块兼容的JavaScript模块YUI.add()

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android