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的文檔看起來實在難受。