Babel配置中的presets、plugins、各個階段stage的含義

什麼是Babel

Babel 官方文檔: https://babeljs.io/

Babel 中文文檔：https://www.babeljs.cn/

咱們知道各個瀏覽器對JavaScript版本的支持各不相同，不少新的語法沒法直接在瀏覽器中運行，爲了解決這個「溝通不順暢」的問題，因此就有了Babel，Babel主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中。有了Babel，咱們能夠肆無忌憚的使用ES6+的語法。

如何配置babel

// .babelrc文件
{
    "presets": [
        "es2015"，
        "react",
        "stage-0"
    ],
    "plugins": []
}

這個配置文件是針對babel6的，babel6作了一系列模塊化，不像babel5同樣把全部的內容都加載。

好比要編譯es6，咱們須要設置presets包含"es2015"，即預先加載es6編譯的模塊；

若是須要編譯jsx，咱們須要設置presets包含"react"，即預先加載react編譯的模塊；

 

presets：預設，即一組預先設定的插件，是babel插件的組合

presets與plugins同時存在的執行順序

1. plugins運行在presets以前；

2. plugins配置項，按照聲明順序執行，從第一個到最後一個；

3. presets配置項，按照聲明逆序執行，從最後一個到第一個（主要是爲了確保向後兼容）

 

stage-x：指處於某一階段的js語言提案

• Stage 0 - 設想（Strawman）：只是一個想法，可能有 Babel插件。
• Stage 1 - 建議（Proposal）：這是值得跟進的。
• Stage 2 - 草案（Draft）：初始規範。
• Stage 3 - 候選（Candidate）：完成規範並在瀏覽器上初步實現。
• Stage 4 - 完成（Finished）：將添加到下一個年度版本發佈中。

stage-x的參數列表請參考：https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md

 

 

!!! babel7的一些變化：

babel7中刪除了"stage-x"的預設；

建議使用env，代替 es201五、es201六、es2017預設

更多詳情請查閱 https://www.babeljs.cn/blog/2018/08/27/7.0.0