babel是甚麼

Babel是一個工具鏈，主要用於在當前和較舊的瀏覽器或環境中將ECMAScript 2015+代碼轉換為JavaScript的向後兼容版本(最常做的是將es2015/2016/2017/2046 等javascript版本語法，轉成ES5)。以下是Babel可以為您做的主要事情：

1. 轉換語法
2. 目標環境中缺少的Polyfill功能（通過@ babel / polyfill）
   源始碼轉換（codemods）

```
// 轉碼前
input.map(item => item + 1);

// 轉碼後
input.map(function (item) {
  return item + 1;
});
```

使用方式

總共存在三種方式：

1. 使用單體文件(standalone script)
2. 命令行(cli)
3. 構建工具的插件(webpack 的babel-loader, rollup 的rollup-plugin-babel)。

其中後面兩種比較常見。第二種多見於package.json中的scripts段落中的某條命令；第三種就直接集成到構建工具中。
這三種方式只有入口不同而已，調用的babel 內核，處理方式都是一樣的，所以我們先不糾結入口的問題。

1. 配置文件.babelrc

Babel的配置文件是.babelrc，存放在項目跟目錄。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

• presets

preset可以作為Babel插件的組合，甚至可以作為可以共享的options配置

preset 分為以下幾種：

1. 官方針對常用環境編寫了一些preset，目前包括env (@babel/preset-env), react (@babel/preset-react), flow (@babel/preset-react), typescript (@babel/preset-typescript) 等。這裡最重要的是env，下面會詳細介紹。
2. stage-x，這裡面包含的都是當年最新規範的草案，每年更新。
3. es201x, latest
   這些是已經納入到標準規範的語法。例如es2015包含arrow-functions，es2017包含syntax-trailing-function-commas。但因為env的出現，使得es2016和es2017都已經廢棄。所以我們經常可以看到es2015被單獨列出來，但極少看到其他兩個。
   latest 是env 的雛形，它是一個每年更新的preset，目的是包含所有es201x。但也是因為更加靈活的env 的出現，已經廢棄。

1. Plugin 會運行在Preset 之前。
2. Plugin 會從前到後順序執行。
3. Preset的順序則剛好相反 (從後向前)。
   preset的逆向順序主要是為了保證向後兼容，因為大多數用戶的編寫順序是['es2015', 'stage-0']。這樣必須先執行stage-0才能確保babel不報錯。因此我們編排preset的時候，也要注意順序，其實只要按照規範的時間順序列出即可。

而最需要配置的當屬env，如下：

"presets": [
    // 带了配置项，自己变成数组
    [
        // 第一个元素依然是名字
        "env",
        // 第二个元素是對象，列出配置项
        {
          "module": false
        }
    ],

    // 不帶配置項直接列出
    "stage-2"
]

env

它可以根据开发者的配置，按需加载插件。配置项大致包括：1. 需要支持的平台：比如node、浏览器等。2.需要支持的平台的版本：比如支持node@6.1等。 3. 它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset

因為env 最為常用也最重要，所以我們有必要重點關注。
env 的核心目的是通過配置得知目標環境的特點，然後只做必要的轉換。例如目標瀏覽器支持es2015，那麼es2015 這個preset 其實是不需要的，於是代碼就可以小一點(一般轉化後的代碼總是更長)，構建時間也可以縮短一些。
如果不寫任何配置項，env等價於latest，也等價於es2015 + es2016 + es2017三個相加(不包含stage-x中的插件)。

另外一個好用的配置項是modules。這可以讓babel以特定的模塊化格式來輸出代碼(ex:umd es6 commonJs)。如果選擇false就不進行模塊化處理。而這一塊之後我們會用rollup處理

總結

今天babel介紹就先到這裡，明天將會實際操做並補充babel相關套件

參考資料

• babel官方(https://babeljs.io/docs/en/)
• 阮一峰 Babel-入门教程(https://www.ruanyifeng.com/blog/2016/01/babel.html)
• 小蘑菇哥哥 一口(很長的)氣了解babel (https://juejin.im/post/6844903743121522701#heading-1)