Babel是什麼？

要是官方文檔寫得好的話，我也許就不用本身作個筆記。

官方文檔

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。下面列出的是 Babel 能爲你作的事情：

一、語法轉換

二、經過 Polyfill 方式在目標環境中添加缺失的特性 (經過 @babel/polyfill 模塊)

三、源碼轉換 (codemods)

四、更多！ (查看這些 視頻 得到啓發)

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

指南文檔第一篇關於babel的解釋，就有三個問題：

一、第2句中「經過 Polyfill 方式」這一段。在解釋一個概念時，引入本身的內容細節做延伸解釋，會讓人產生另外一個疑問，這東西又是什麼？它該回答的是這是什麼，而不該該包含這怎麼作。

二、第4句的更多查看視頻的，更讓人無語。我從沒看過一個框架、庫或工具，是須要讀者看視頻來總結該東西的功能的。連一個工具的功能都不能簡潔說明，實在不明白寫文檔的人在想什麼。

三、文檔組織缺乏邏輯，比較零散。例如指南剛說了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配置：

一、使用 babel-preset-es2015（簡寫爲es2015）將ES6的代碼轉爲ES5。

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

二、「 modules: false」，是不把模塊轉換成其餘模塊類型（"amd" | "umd" | "systemjs" | "commonjs" | "cjs" ）。

三、」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配置：

一、使用 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，比官方文檔寫得更清晰。

二、presets設置了env和stage-2，模塊的執行順序是從下至上，從高級版本到低級版本。這很好理解，例如代碼裏包含ES7和ES6的語法，那你確定得先轉換ES7，再轉換ES6，由於ES7的代碼可能轉換成ES6的代碼。

三、根層級的「env」，則是在不一樣NODE_ENV參數下，另外一套生效的Babel配置。如裏面的「test」所配置的，就是在 NODE_ENV=test 時的Babel配置。

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

總結

要是想看babel的一些插件的具體用法，建議是直接在npm上看，Babel的文檔看起來實在難受。