【探秘ES6】系列专栏（九）：使用Babel和Broccoli
发表于 14:33|
来源Mozilla Web开发者博客|
作者Gastón I. Silva
摘要：新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性，让Web开发者对此有清晰全面的了解。本文为系列的第九篇，带你了解ES6的Babel和Broccoli。
ES6作为新一代JavaScript标准，已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解，Mozilla Web开发者博客推出了《》系列文章。CSDN已获授权，将持续对该系列进行翻译，组织成，供大家学习借鉴。本文为该系列的第九篇。本文接下来讲述的是有关Babel和Broccoli（花椰菜）的使用。Babel的使用Babel是一个源代码到源代码的转换器，例如ES6到ES5的转换并使代码在主流JS引擎中执行。在项目中可通过多种方式来使用Babel，例如命令行方式，其格式为：babel script.js --out-file script-compiled.js在浏览器中使用也是可以的，可以把Babel作为常规的JS库进行链接使用：&script src="node_modules/babel-core/browser.js"&&/script&
&script type="text/babel"&
// Your ES6 code
&/script&不过当你的基代码不断增加，则需要更具扩展性的方法以管道方式整合Babel。接下来会介绍如何使用创建工具Broccoli.js来对Babel进行整合。第一个Broccoli及Babel项目Broccoli是一个帮助快速创建项目的工具。透过Broccoli插件，可以压缩和管理文件，从而减轻我们的负担。当项目发生变动时，Broccoli可以帮助完成目录变更，执行命令等事情。项目创建NODE如你所想，事前需要安装Node 0.11或更新版本。如果使用的是unix系统，请不要使用包管理器（apt，yum）进行安装，这样做是为了避免Root权限的使用。我们建议以手动行方式完成，更具体原因点击这里进行查看，里面还介绍了其它的安装方式。BROCCOLIBroccoli项目创建第一步：mkdir es6-fruits
cd es6-fruits
# Create an empty file called Brocfile.js
touch Brocfile.js接着安装broccoli和broccoli-cli：# the broccoli library
npm install --save-dev broccoli
# command line tool
npm install -g broccoli-cli编写ES6代码创建scr目录并存放fruits.js文件：mkdir src
vim src/fruits.js编写ES6代码：let fruits = [
{id: 100, name: 'strawberry'},
{id: 101, name: 'grapefruit'},
{id: 102, name: 'plum'}
for (let fruit of fruits) {
let message = `ID: ${fruit.id} Name: ${fruit.name}`;
console.log(message);
console.log(`List total: ${fruits.length}`);上述代码使用了3个ES6特性：使用let进行本地声明；使用；。保存并执行：node src/fruits.js使用Node或其它浏览器来执行：let fruits = [
SyntaxError: Unexpected identifier转换时刻现在我们使用Broccoli来载入代码然后透过Babel推送。编辑Brocfile.js添加以下代码：// import the babel plugin
var babel = require('broccoli-babel-transpiler');
// grab the source and transpile it in 1 step
fruits = babel('src'); // src/*.js
module.exports =注意这里要安装好Broccoli插件broccoli-babel-transpiler：npm install --save-dev broccoli-babel-transpiler最后可以编译项目并执行：broccoli build dist # compile
node dist/fruits.js # execute ES5其输出结果应该是：ID: 100 Name: strawberry
ID: 101 Name: grapefruit
ID: 102 Name: plum
List total: 3是不是很简单？你可以打开dist/fruits.js来查看转换后的代码。Babel转换器的亮点是生成的代码具有良好的可读性。为网站编写ES6代码第二个例子会在第一个例子基础上进行修改。第一步，移出es6-fruits文件夹然后创建新的目录es6-website。在src目录中创建三个文件：src/index.html&!DOCTYPE html&
&title&ES6 Today&/title&
border: 2px solid #9a9a9a;
border-radius: 10
padding: 6
font-family:
text-align:
padding: 1
&h1&ES6 Today&/h1&
&div id="info"&&/div&
&div id="content"&&/div&
&script src="///jquery-2.1.4.min.js"&&/script&
&script src="js/my-app.js"&&/script&
&/html&src/print-info.jsfunction printInfo() {
$('#info')
.append('&p&minimal website example with' +
'Broccoli and Babel&/p&');
$(printInfo);src/print-colors.js// ES6 Generator
function* hexRange(start, stop, step) {
for (var i = i & i += step) {
function printColors() {
var content$ = $('#content');
// contrived example
for ( var hex of hexRange(900, 999, 10) ) {
var newDiv = $('&div&')
.attr('class', 'color')
.css({ 'background-color': `#${hex}` })
.append(`hex code: #${hex}`);
content$.append(newDiv);
$(printColors);你或许注意到一个细节：function* hexRange，没错，这就是ES6生成器，但该特性目前还不能兼容所有的浏览器。因此这里需要使用polyfill，其已包含在Babel中。下一步是合并所有JS文件然后在网站上使用。最关键一步是要编写Brocfile文件。现在先安装4个插件：npm install --save-dev broccoli-babel-transpiler
npm install --save-dev broccoli-funnel
npm install --save-dev broccoli-concat
npm install --save-dev broccoli-merge-trees然后进行使用：// Babel transpiler
var babel = require('broccoli-babel-transpiler');
// filter trees (subsets of files)
var funnel = require('broccoli-funnel');
// concatenate trees
var concat = require('broccoli-concat');
// merge trees
var mergeTrees = require('broccoli-merge-trees');
// Transpile the source files
var appJs = babel('src');
// Grab the polyfill file provided by the Babel library
var babelPath = require.resolve('broccoli-babel-transpiler');
babelPath = babelPath.replace(/\/index.js$/, '');
babelPath += '/node_modules/babel-core';
var browserPolyfill = funnel(babelPath, {
files: ['browser-polyfill.js']
// Add the Babel polyfill to the tree of transpiled files
appJs = mergeTrees([browserPolyfill, appJs]);
// Concatenate all the JS files into a single file
appJs = concat(appJs, {
// we specify a concatenation order
inputFiles: ['browser-polyfill.js', '**/*.js'],
outputFile: '/js/my-app.js'
// Grab the index file
var index = funnel('src', {files: ['index.html']});
// Grab all our trees and
// export them as a single and final tree
module.exports = mergeTrees([index, appJs]);构建并执行代码：broccoli build dist可以看到dist文件夹结构应该是这样的：然后查看该静态网站：cd dist/
python -m SimpleHTTPServer
# visit &a href="http://localhost:8000/"&http://localhost:8000/&/a&其显示结果是：Babel和Broccoli更多功能如果你想使用Babel和Broccoli完成更多任务，不妨多看看这个项目：。这也是一个Broccoli+Babel组合的项目，内容是涉及模块，导入和单元测试的处理。（译者：伍昆，责编：陈秋歌）原文链接：&本译文遵循Creative Commons Attribution Share-Alike License v3.0&欢迎加入CSDN前端交流群2：，进行前端技术交流。&相关阅读：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章今天想在新项目中使用es6的generators，发现虽然gulp已经有了babel编译，但仍会报错，网上查找后发现解决办法是加载polyfill，但是找到的办法都不试用我的项目。
解决办法：在index.html中加载node_modules的babel-polyfill，这样就能在gulp打包编译时对es6的一些语法生效了
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
谁能详细说说这两者的关系？一开始只用了transform-runtime，后来发现有些es6的方法不能用，比如字符串的includes。后来又在入口文件加上babel-polyfill，能用了。但不知道babel-runtime能否去掉，babel-polyfill和babel-runtime功能是否有重复？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
官网是这么说的，那些需要修改内置api才能达成的功能，譬如：扩展String.prototype，给上面增加includes方法，就属于修改内置API的范畴。这类操作就由polyfill提供。
详细说明：
其中哪个部分你觉得说的不好？还是其他什么问题
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
babel-polyfill 使用场景
Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。
babel-runtime 使用场景
Babel 转译后的代码要实现源代码同样的功能需要借助一些帮助函数，例如，{ [name]: 'JavaScript' } 转译后的代码如下所示：
'use strict';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
obj[key] =
var obj = _defineProperty({}, 'name', 'JavaScript');
类似上面的帮助函数 _defineProperty 可能会重复出现在一些模块里，导致编译后的代码体积变大。Babel 为了解决这个问题，提供了单独的包 babel-runtime 供编译模块复用工具函数。
启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数，转译代码如下：
'use strict';
// 之前的 _defineProperty 函数已经作为公共模块 `babel-runtime/helpers/defineProperty` 使用
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var obj = (0, _defineProperty3.default)({}, 'name', 'JavaScript');
除此之外，babel 还为源代码的非实例方法（Object.assign，实例方法是类似这样的 "foobar".includes("foo")）和 babel-runtime/helps 下的工具函数自动引用了 polyfill。这样可以避免污染全局命名空间，非常适合于 JavaScript 库和工具包的实现。例如 const obj = {}, Object.assign(obj, { age: 30 }); 转译后的代码如下所示：
'use strict';
// 使用了 core-js 提供的 assign
var _assign = require('babel-runtime/core-js/object/assign');
var _assign2 = _interopRequireDefault(_assign);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var obj = {};
(0, _assign2.default)(obj, {
思考：babel-runtime 为什么适合 JavaScript 库和工具包的实现？
避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积；
在没有使用 babel-runtime 之前，库和工具包一般不会直接引入 polyfill。否则像 Promise 这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill 一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5 的 polyfill。在使用 babel-runtime 后，库和工具只要在 package.json 中增加依赖 babel-runtime，交给 babel-runtime 去引入 polyfill 就行了；
具体项目还是需要使用 babel-polyfill，只使用 babel-runtime 的话，实例方法不能正常工作（例如 "foobar".includes("foo")）；
JavaScript 库和工具可以使用 babel-runtime，在实际项目中使用这些库和工具，需要该项目本身提供 polyfill；
疑问：像 antd@2.x 这样的库使用了 babel-runtime，在实际项目中使用 antd@2.x，我们需要引入 babel-polyfill。但全部 polyfill 打包压缩下来也有 80kb 左右，其中很多 polyfill 是没有用到的，如何减少体积呢？手工一个个引入使用到的 polyfill，似乎维护成本太高！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
transform-runtime只会对es6的语法进行转换，而不会对新api进行转换。如果需要转换新api，就要引入babel-polyfill
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App