## Babel > Babel是一个 JavaScript 编译器，可以将ES6代码转化为ES5，从而在浏览器或其他环境执行。 ### 命令行环境 安装 ``` $ npm install --global babel-cli $ npm install --save babel-preset-es2015 ``` 然后在当前目录新建配置文件 .babelrc。 ``` // .babelrc { "presets": ['es2015'] } ``` Babel自带一个babel-node命令，提供支持ES6的REPL环境。，可以直接运行ES6代码。 ``` $ babel-node > > console.log([1,2,3].map(x=> x * x)) > [1,4,9] ``` babel命令可以将ES6代码转换为ES5代码。 ``` $ babel es6.js "use strict" console.log([1,2,3,].map(function(x) { return x * x })) ``` -o参数（或--out-file）可将转换后的代码从标准输出重定向到文件。 ``` $ babel es6.js -o es5.js ``` -d参数用于转换整个目录。-d参数后面是输出目录。 ``` $ babel -d build-dir source-dir ``` -s参数用于生产source map 文件。 ``` $ bebel -d build-dir source-dir -s ``` ### 浏览器环境 Babel可以用于浏览器环境，但从Babel 6开始不再直接提供浏览器版本，要用构建工具实现。不使用构建工具则只能通过安装5.x版本的babel-core模块获取。 ``` $ npm install babel-core5 ``` 安装后，在目录的node\_module/babel-core/子目录找到babel的浏览器版本browser.j和browser.min.js，并插入代码。 ``` <script src="node_module/babel-core/browser.js"></script> <script type="text/babel"> //ES6 代码 </script> ``` 上面的代码，browser.js是Babel提供的转换器脚本，可以用在浏览器运行。自己写的ES6代码放在script标签，但要注明type="text/babel"。 Babel配合Browserify可以生成浏览器能够直接运行的脚本。 ``` $ npm install --save-dev babelify babel-preset-2015 $ browserify script -o bundle.js -t [ babelify --presets [ es2015 react ] ] ``` 上面的代码用于将ES6脚本script.js转化为bundle.js。浏览器直接加载后者即可。 在package.json加入下面的代码，不必每次输入参数 ``` { "browserify": { "transform": [[ babelify --presets [ es2015 react ] ]] } } ``` ### Node.js环境 安装 ``` $ npm install --save-dev babel-core babel-preset-2015 ``` 在项目根目录新建 .babelrc 文件 ``` // .babelrc { "presets": ['es2015'] } ``` 最后在脚本中调用babel-core的transform方法。 ``` var es5Code = 'let x = n => n+1' var es6Core = require('babel-core') .transform(es5Code, {presets: [''es20215]}) .code; ``` 上面的代码好，transform的第一个参数是一个字符串，表示需要转换的ES5代码，第二个参数是转换的配置对象。 在应用入口脚本头部加入下面的语句 ``` require('babel-core/register') ``` 后面所有通过require命令加载的后缀为.es6、.es、.jsx和.js的脚步都会先通过babel转码。 由于 Babel 只转换语法 \(如箭头函数\)， 你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法如 String.padStart \(left-pad\) 等。