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，代替 es2015、es2016、es2017預設

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