Babel简介

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel的配置文件是 .babelrc ，存放在项目的根目录下。

presets 字段设定转码规则，官方提供以下的规则集，根据需要安装。

preset 分为以下几种：

官方内容，目前包括 env, react, flow, minify 等。这里最重要的是 env，后面会详细介绍。

stage-x，这里面包含的都是当年最新规范的草案，每年更新。

细分为

Stage 0 - 草稿: 只是一个想法，经过 TC39 成员提出即可。

Stage 1 - 提案: 初步尝试。

Stage 2 - 初稿: 完成初步规范。

Stage 3 - 候选: 完成规范和浏览器初步实现。

Stage 4 - 完成: 将被添加到下一年度发布。

{
  "presets": ["es2015","react","stage-2"],
  "plugins": ["transform-runtime"]
}

运行方式和插件
babel 总共分为三个阶段：解析，转换，生成。

babel 本身不具有任何转化功能，它把转化的功能都分解到一个个 plugin 里面。因此当我们不配置任何插件时，经过 babel 的代码和输入是相同的。

同一类语法可能同时存在语法插件版本和转译插件版本。如果我们使用了转译插件，就不用再使用语法插件了。

执行顺序
1、Plugin 会运行在 Preset 之前。
2、Plugin 会从前到后顺序执行。
3、Preset 的顺序则刚好相反 (从后向前)。

env
env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。例如目标浏览器支持 es2015，那么 es2015 这个 preset 其实是不需要的，于是代码就可以小一点(一般转化后的代码总是更长)，构建时间也可以缩短一些。如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。

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

如上配置将考虑所有浏览器的最新2个版本(safari大于等于7.0的版本)的特性，将必要的代码进行转换。而这些版本已有的功能就不进行转化了。

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

如上配置将目标设置为 nodejs，并且支持 6.10 及以上的版本。也可以使用 node: 'current' 来支持最新稳定版本。例如箭头函数在 nodejs 6 及以上将不被转化，但如果是 nodejs 0.12 就会被转化了。

另外一个有用的配置项是 modules 。它的取值可以是 amd , umd , systemjs , commonjs 和 false 。这可以让 babel 以特定的模块化格式来输出代码。如果选择 false 就不进行模块化处理。

转换

https://www.babeljs.cn/repl

const metricRender = (text = '', before, after, commas) => {
  return `${before || ''}${commas ? addCommas(text) : text}${after || ''}`;
};
let a=[]
let c=[...a].map(item=>{})
Promise.resolve.then(()=>null)

es2015-loose转换后如下

"use strict";
var metricRender = function metricRender(text, before, after, commas) {
  if (text === void 0) {
    text = "";
  }
  return (
    "" + (before || "") + (commas ? addCommas(text) : text) + (after || "")
  );
};
var a = [];
var c = [].concat(a).map(function(item) {});
Promise.resolve.then(function() {
  return null;
});

注意： babel7版本对应的babel插件依赖包都是以@babel/开头的并不是babel-.*

安装Babel7版本 npm install -g @babel/cli @babel/core

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ],
    [
      "@babel/plugin-transform-runtime"
    ],
    [
      "@babel/plugin-transform-arrow-functions"
    ]
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "10"
        }
      }
    ],
    [
      "@babel/react"
    ]
  ]
}