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"
]
]
}