【转】babel那些事儿
从前，一提到新东西，我的反应就是兼容性好不好，如果不能满足产品经理的需求，就还是用保守的方式实现吧。毕竟前端开发是一件很灵活的事，怎么写都行，至于为何会用某种方法，一定是综合考虑兼容性，性能，用户体验，开发成本等因素后再说。兼容性和新事物有时就像鱼和熊掌不可兼得，必须权衡利弊，做一个决断。但是ECMAScript 2015不一定要等所有浏览器都支持后才可以用，于是你会想到一个工具babel，它可以助ECMAScript 2015一臂之力，让处于某个stage的且尚未纳入es规范的特性提前支持，因为babel能够把不同stage的es，转成浏览器识别的js。
在学babel前，我有一个这样的疑问，为啥说到babel，一般会提到es5+？他俩有啥关系？babel是伴随ECMAScript 2015出现的吗？如果不是，它比ECMAScript 2015出生早，还是晚呢？感觉问题很多，就像破案一样，疑点重重，越走越深，但是主方向不会忘。我有时会问自己，我是搞清它的历史背景呢，还是赶紧敲命令行，立刻做项目？内心的躁动告诉我，反正有时间研究，索性我就挖地三尺，弄清babel的祖坟在哪儿。
看了babel的官方文档后，我恍然大悟，原来babel不是TC39的作品啊！！！如果说ECMAScript的爹娘是TC39，那么babel的爹是james kyle，一个澳大利亚工程师，曾就职于Facebook。总之，babel和ECMAScript 2015没有什么血缘关系，babel也不是ECMAScript 2015出生的附属品，babel5.0发布的比ECMAScript 2015早。
一、babel版本有哪些？
2015年1月12日，6to5和esnext开源；
2015年2月15日，6to5重命名为babel；
2015年3月31日，babel 5.0发布；
2015年10月30日，babel 6.0发布。
二、babel的用途
babel是一个JavaScript编译器。
1、ES6转成ES5
默认情况下，babel自带了一组ES2015语法转化器，这些转化器能把ES2015转为ES5，让你现在就使用最新的JavaScript语法，而不用等待浏览器提供支持。在babel中，默认启用stage-2及以上的proposal。如果有人说“不同stage的babel”，这种说法是错误的，因为babel没有所谓的stage，babel就是一个编译器。至于babel的配置文件参数中为什么会牵扯到stage，是由于babel要知道把哪个stage的es5+转换成浏览器能识别的js，而TC39 Process会告诉babel是哪个stage。
2、jsx文件转成js文件
babel可以把React的JSX语法转成普通JavaScript语法。
3、babel由插件组成，可组合拼装。
4、babel支持source map，帮助调试。
三、babel的工作原理
1、解析
用babylon对源代码(比如ES6)进行词法解析，得到AST；
2、转换
用babel-traverse对AST树进行遍历转换，得到新的AST树；
3、生成
用babel-generator通过AST树生成目标代码(比如ES5)。
四、babel的配置
babel的配置文件是.babelrc，存放在项目的根目录下。使用babel的第一步，就是配置这个文件。什么是.babelrc文件呢？熟悉linux的同学一定知道，rc结尾的文件通常代表运行时自动加载的文件，配置等等，类似bashrc，zshrc。同样babelrc在这里也是有同样的作用，而且在babel6中，这个文件必不可少。
该文件用来设置转码规则和插件，基本格式如下。
{ "presets": [], "plugins": [] }
1、转码规则
presets字段设定转码规则，转码规则可以告诉babel去处理什么语法。
A、babel-preset-es2015
这是ES2015（最新版本的JavaScript标准，也叫做ES6）的转码规则。使用它后，babel可以将ES6语法转码为普通 JavaScript（即ES5）语法。
# 安装ES2015转码规则 $ npm install --save-dev babel-preset-es2015
B、babel-preset-react
这是react的转码规则。使用它后，babel可以将react语法转码为普通JavaScript语法。
# 安装react转码规则 $ npm install --save-dev babel-preset-react
C、babel-preset-stage-x
这是ES7不同阶段语法提案的转码规则。使用它后，babel可以将ES7不同阶段语法转码为普通JavaScript语法。
# 安装ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 $ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
以上每种预设都依赖于紧随的后期阶段预设。例如，babel-preset-stage-1依赖babel-preset-stage-2，后者又依赖babel-preset-stage-3。
最终，在.babelrc文件这样写。
{ "presets": [ "es2015", "stage-0" ], "plugins": [] }
D、babel-preset-env
这是最新的预设插件，包含es2015，es2016，es2017和latest等，不包含react，polyfill。
$ npm install --save-dev babel-preset-env
最终，在.babelrc文件这样写，是不是比上面简洁了很多？
{ "presets": ["env"], "plugins": [] }
如果与webpack一起使用，需要再配置下webpack.config.js文件。
module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader' } } ] }
2、插件
A、babel-plugin-transform-runtime
babel-polyfill可以控制你自己写的文件，但是不能很好的处理第三方library，因为polyfill会污染原来的全局环境，容易发生冲突，这时候babel-runtime闪电登场。
babel-runtime是一个提供了regenerator、core-js和helpers的运行时库。
babel-plugin-transform-runtime插件依赖babel-runtime，babel-runtime是真正提供runtime环境的包，也就是说transform-runtime插件是把js代码中使用到的新原生对象和静态方法转换成对runtime实现包的引用。
a.1、利弊
可以用babel-runtime/core-js导出的对象和方法替代ES6引入的新原生对象和静态方法，避免全局污染；
可以用babel-runtime/regenerator导出的函数取代generators或async函数；
可以把多余代码提取到babel-runtime/helps中，减少体积。
由于runtime不会污染全局空间，所以实例方法是无法工作的，这就需要polyfill啦。
a.2、安装
# babel-plugin-transform-runtime用于开发环境 $ npm install --save-dev babel-plugin-transform-runtime # babel-runtime用于生产环境 $ npm install --save babel-runtime
a.3、配置.babelrc文件
{ "plugins": [ ["transform-runtime", { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": "babel-runtime" }] ] }
a.4、使用
// ES6代码 var sym = Symbol(); // 通过transform-runtime转换后的ES5+runtime代码 var _symbol = require("babel-runtime/core-js/symbol"); var sym = (0, _symbol.default)();
五、babel-core，新语法转码
1、安装
$ npm install --save-dev babel-core
2、使用
var babel = require("babel-core"); A、如果是字符串形式的JavaScript代码，可以使用transform编译。 babel.transform("code();", options); // { code, map, ast } B、如果是文件，异步编译使用transformFile。 babel.transformFile("filename.js", options, function(err, result) { result; // { code, map, ast } }); C、如果是文件，同步编译使用transformFileSync。 babel.transformFileSync("filename.js", options); // { code, map, ast } D、要是已经有一个babel AST（抽象语法树）了就可以直接从AST进行转换。 babel.transformFromAst(ast, code, options); // { code, map, ast }
六、babel-polyfill，新Api转码
babel默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。babel-polyfill正好可以转码新的API，polyfill和runtime都是对core-js和regenerator的再封装，方便使用。
插播一段，一直好奇polyfill是个啥东西，简单查了下，代码填充，也可译作兼容性补丁，类似软垫片。
1、安装
$ npm install --save-dev babel-polyfill
2、使用
//方案A，在your.js中引入 import 'babel-polyfill'; //方案B，在node.js中引入 require('babel-polyfill'); //方案C，设置webpack.config.js module.exports = { entry: ["babel-polyfill", "./app/js"] };
七、babel-cli，命令行转码
1、安装
$ npm install --save-dev babel-cli
2、命令行
# 转码结果输出到标准输出 $ babel example.js # 转码结果写入一个文件 # --out-file 或 -o 参数指定输出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js # 整个目录转码 # --out-dir 或 -d 参数指定输出目录 $ babel src --out-dir lib # 或者 $ babel src -d lib # -s 参数生成source map文件 $ babel src -d lib -s
3、命令行优化
可以像上面一样直接输入命令完成转码，也可以修改package.json文件，然后执行npm run build。
"scripts": { "build": "babel src -d lib" }
八、babel-register，require实时转码
通过绑定node.js的require来自动转译require引用的js代码文件。
babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用babel进行转码。
1、安装
$ npm install --save-dev babel-register
2、使用
//必须先加载babel-register require("babel-register"); require("./index.js");
3、利弊
这种方式不需要手动对index.js转码。
babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用。
九、sublime插件转码es6
1、安装插件
在sublime中，安装babel插件。
2、全局安装babel-cli包
cnpm install -g babel-cli
3、配置sublime中的babel插件
preferences -> Package Settings -> Babel -> Settings-Default，打开文件，按照下面的参数配置。
{ "debug": false, "use_local_babel": true, "node_modules": { "windows": "C:/Users/Administrator/AppData/Roaming/npm/node_modules/babel-cli/node_modules", "linux": "/usr/lib/node_modules", "osx": "/usr/local/lib/node_modules" }, "options": {} }
4、配置.babelrc文件
在当前目录配置好.babelrc文件，定义转码规则，在当前目录放置好依赖包。
{ "presets": ["es2015"], "plugins": [] }
5、执行转换
写一个es6.js文件，按下快捷键Ctrl+Shift+P，输入babel，选择babel transform执行，会自动生成一个匿名文件。很诡异的是，这个文件自动保存了，但不是在当前目录，也不是在sublime的包目录里，具体在哪，我也不清楚，我只知道这不是我想要的结果。我希望能够在保存es6.js文件时，自动生成期望目录的es5.js文件，而且名称一致，文件实际存在，不是无名文件。后面找到优化方案，再回来补充。
tools -> Babel -> Babel Transform，也可以执行转换。
十、在线转码
babel提供一个repl在线编译器，可以在线将ES6代码转为ES5代码。转换后的代码，可以直接作为ES5代码插入网页运行。
十一、总结
看了上面的介绍，你会用babel了吗？如果还有点迷惑，搞不清东南西北，看这里就对啦。
1、声明转换规则
babel的配置文件.babelrc列举了一些要用到的东西。比如babel要用env，就把env写进去，声明要处理哪些语法。
2、进行转换操作
幕后高人则是babel-core，babel-polyfill或者babel-cli，他们负责把源文件转换成目标文件。
安装了babel-core和babel-polyfill，并在你的源文件中引用，页面加载的时候，就会自动实现转换。或者安装babel-cli，在命令行输入命令，手动转换。
