Babel是什么？

要是官方文档写得好的话，我也许就不用自己做个笔记。

官方文档

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

1、语法转换

2、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

3、源码转换 (codemods)

4、更多！ (查看这些 视频 获得启发)

PS：https://www.babeljs.cn/docs/

指南文档第一篇关于babel的解释，就有三个问题：

1、第2句中“通过 Polyfill 方式”这一段。在解释一个概念时，引入自己的内容细节作延伸解释，会让人产生另一个疑问，这东西又是什么？它该回答的是这是什么，而不应该包含这怎么做。

2、第4句的更多查看视频的，更让人无语。我从没看过一个框架、库或工具，是需要读者看视频来总结该东西的功能的。连一个工具的功能都不能简洁说明，实在不明白写文档的人在想什么。

3、文档组织缺少逻辑，比较零散。例如指南刚说了Babel的功能，下面却写了一些插件的使用方法，以此反向引出Babel的功能，即散乱，又不全面。

Babel是什么

Babel是将ES6及以上版本的代码转换为ES5的工具。

它用 babel.config.js 或 .babelrc 文件作为配置文件，其中最为重要的配置参数是presets和plugins。

plugins：Babel插件可以将输入源码进行转换，输出编译后的代码。

presets：一组Babel插件，目的是方便使用。官方已经内置了一些preset，如babel-preset-env。

PS：其他的查看Babel文档就行。

现学现用

以 .babelrc 配置文件为例，解释常用的用法。

例子一：

{
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
   ]
}

PS：ES2015 = ES6

这个Babel配置：

1、使用 babel-preset-es2015（简写为es2015）将ES6的代码转为ES5。

PS：https://www.npmjs.com/package/babel-preset-es2015

2、“ modules: false”，是不把模块转换成其他模块类型（"amd" | "umd" | "systemjs" | "commonjs" | "cjs" ）。

3、”component"，其实也就是 babel-plugin-component 插件，它是将组件的引用代码进行转换。

PS：https://www.npmjs.com/package/babel-plugin-component

Converts

import { Button } from 'components'

to

var button = require('components/lib/button’)
require('components/lib/button/style.css')

例子二：

{
 "presets": [
   ["env", {
     "modules": false,
     "targets": {
       "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     }
   }],
   "stage-2"
 ],
 "plugins": [],
 "env": {
   "test": {
     "presets": ["env", "stage-2"],
     "plugins": ["istanbul"]
   }
 }
}

这个Babel配置：

1、使用 babel-preset-env 将ES6的代码转为ES5。presets里的“env” 是模块名称，作为第一个参数，第二个参数是该模块的传入参数。

虽然 babel-preset-es2015 与 babel-preset-env 的功能类似，但推荐使用 babel-preset-env ，babel-preset-es2015已不建议使用。

PS：详细参数解释请看https://www.npmjs.com/package/babel-preset-env，比官方文档写得更清晰。

2、presets设置了env和stage-2，模块的执行顺序是从下至上，从高级版本到低级版本。这很好理解，例如代码里包含ES7和ES6的语法，那你肯定得先转换ES7，再转换ES6，因为ES7的代码可能转换成ES6的代码。

3、根层级的“env”，则是在不同NODE_ENV参数下，另一套生效的Babel配置。如里面的“test”所配置的，就是在 NODE_ENV=test 时的Babel配置。

PS：babel-plugin-istanbul请看https://www.npmjs.com/package/babel-plugin-istanbul

总结

要是想看babel的一些插件的具体用法，建议是直接在npm上看，Babel的文档看起来实在难受。