深入了解babel（一）

babel的定义

Babel 是 JavaScript 编译器，更确切地说是源码到源码的编译器，通常也叫做“转换编译器（transpiler）”。

babel-core

如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包

npm install babel-core
var babel = require("babel-core");

字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译

babel.transform("code();....", options);
// => { code, map, ast }

如果是文件的话，可以使用异步 api

babel.transformFile("./myCode.js", options, function(err, result) {
  result; // => { code, map, ast }
});

对于上述所有方法，options 指的都是http://babeljs.io/docs/usage/...

在options中可以设置presets和plugins，或者创建.babelrc文件，options默认开启读取babelrc文件的功能。以下是开启自定义预设和插件的例子：

const {transform,generate}=require('babel-core');
const myPlugin=require('./myPlugin');
const mypreset=require('./mypreset');

const code = `d = a + b + c`;

var es5Code = transform(code, {
  plugins: [myPlugin],
  presets: [mypreset]
})
console.log(es5Code.code);

.babelrc

在我们告诉 Babel 该做什么之前，我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：

{
  "presets": [],
  "plugins": []
}

由于babelrc的功能默认被开启，可在options中设置{babelrc:false}来显式关闭。

presets

预设，包含一系列插件的集合。目前常用的presets包括es201x,stage-x,env,latest,react,flow。目前罗列的只是babel6的情况。

1. es2015

check-es2015-constants
transform-es2015-arrow-functions
transform-es2015-block-scoped-functions
transform-es2015-block-scoping
transform-es2015-classes
transform-es2015-computed-properties
transform-es2015-destructuring
transform-es2015-duplicate-keys
transform-es2015-for-of
transform-es2015-function-name
transform-es2015-literals
transform-es2015-modules-commonjs
transform-es2015-object-super
transform-es2015-parameters
transform-es2015-shorthand-properties
transform-es2015-spread
transform-es2015-sticky-regex
transform-es2015-template-literals
transform-es2015-typeof-symbol
transform-es2015-unicode-regex
transform-regenerator

2. es2016
transform-exponentiation-operator

3. es2017
syntax-trailing-function-commas
transform-async-to-generator

es201x系列中，只罗列了当年ECMAScript公布的新特性中的语法部分，至于新特性中的API则全部在polyfill中。

babel-preset-stage-x

JavaScript 还有一些提案，正在积极通过 TC39（ECMAScript 标准背后的技术委员会）的流程成为标准的一部分。

这个流程分为 5（0－4）个阶段。 随着提案得到越多的关注就越有可能被标准采纳，于是他们就继续通过各个阶段，最终在阶段 4 被标准正式采纳。

以下是5 个不同阶段的（打包的）预设：

• babel-preset-stage-0 仅仅是个想法
• babel-preset-stage-1 提议
• babel-preset-stage-2 草案
• babel-preset-stage-3 候选
• babel-preset-stage-4 已完成

以上每种预设都依赖于紧随的后期阶段预设。例如，babel-preset-stage-0 包含了 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3。

stage预设是一个一直变化的插件集合，根据当年发布的标准内容，动态改变stage的插件内容，stage3中的候选插件很可能被完成，那就会在babel新release的版本中去除，而stage2中的草案就会进入到stage3中的候选名单中，像是一个传接棒的过程，当然草案或者候选的名单随时可能会被取消。

其中stage-0的do语法糖可以很好的用在jsx中，我们在开发recat的jsx条件判断代码时，可以有以下几种方式：

1.第一种三元表达式

{condition1?condition2?result1:result2:result3}

2.第二种自执行函数

{(()=>{
    if(a){
        return ...;
    }else{
        return ...;
    }
})()}

3.第三种do
{

do{
    if(a){
        'result1'
    }else{
        'result2'
    }
}

}

babel-preset-env

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

当env的配置只简单配置为{presets:['env']}时，与babel-preset-latest（官方已不推荐使用）等价，相当于同时集合了三个babel-preset-es201x预设。
env的执行过程是，首先读取browsers配置中的条件，根据这些条件从browserslist模块可得出该条件下的所有浏览器最低版本号列表，而env又为babel的转译插件提供了浏览器的最低版本号列表，两个浏览器版本号列表的查询可得出一个babel转译插件的集合。

browserslist根据条件查出的浏览器及版本号：

1%, Last 2 versions => {ie:10,chrome:56...}

env提供的转译插件对应浏览器版本号列表：

{
  "check-es2015-constants": {
    "chrome": "49",
    "edge": "14",
    "firefox": "51",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "36",
    "electron": "1"
  },
  "transform-es2015-arrow-functions": {
    "chrome": "47",
    "edge": "13",
    "firefox": "45",
    "safari": "10",
    "node": "6",
    "ios": "10",
    "opera": "34",
    "electron": "0.36"
  }....

最后得出结果

{
plugins:[babel插件1，babel插件2...]
}

babel垫片

Babel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。

比方说，下列含有箭头函数的需要编译的代码：

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

最终会变成这样：

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}

然而，它依然无法随处可用因为不是所有的 JavaScript 环境都支持 Array.from。
babel垫片有三种：

• babel-runtime
• babel-plugin-transform-runtime
• babel-polyfill

babel-runtime和 babel-plugin-transform-runtime的区别是，相当一前者是手动挡而后者是自动挡，每当要转译一个api时都要手动加上require('babel-runtime')，而babel-plugin-transform-runtime会由工具自动添加，主要的功能是为api提供沙箱的垫片方案，不会污染全局的api，因此适合用在第三方的开发产品中。

babel-polyfill则是通过改写全局prototype的方式实现，比较适合单独运行的项目。开启babel-polyfill的方式，可以直接在代码中require，或者在webpack的entry中添加，也可以在babel的env中设置useBuildins为true来开启。

深入了解babel（二）