Babel中關於Present，Plugin，Stage-x的區別及聯繫

首先先看一個配置文件.babelrc

{
    "presets": [
	    "env"
        "react",
        "stage-0",
    ],
    "plugins": [
        ["import", { "libraryName": "antd", "style": "css" }],
        "transform-runtime", // 轉譯JS最新的api
		"transform-decorators-legacy", // 轉譯es7的@修飾器
    ]
}

以上是我個人項目中babel的配置項，接下來我們來詳細說一下它們之間的區別和聯繫

Plugin(插件)

插件就是在代碼運行時所需要的用來將ES2015+的JS語法轉換爲ES5的語法。
實際上Preset和Stage也是歸屬於Plugin中的。
舉個🌰：如果你需要轉換ES2015(ES6)的語法，你需要在.babelrc文件中按需引入check-es2015-constants、es2015-arrow-functions、es2015-block-scoped-functions等等幾十個不同作用的plugin就行了

// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

但是Babel團隊爲了方便，將同屬ES2015的幾十個Transform Plugins集合到babel-preset-es2015一個Preset中，這樣你只需要在.babelrc的presets加入es2015一個配置就可以完成全部ES2015語法的支持了，如下

// .babelrc
{
	"presents": ["es2015"]
}

另外官網也給出了Plugins和Presets的配置項，點擊此處查看

以上內容部分參考：點擊這裏

Present(預設)

在之前的Plugin中已經提到過了，Present可以稱爲是一些功能的Plugins的集合，用的比較多的Presets如下

// .babelrc
{
	"preset": [
	    "env",
		"es2015",
		"es2016",
		"es2017",
		"stage-0",
		"stage-1",
		"stage-2",
		"stage-3",
		"react"
	]
}

官網這裏有詳細的說明

接下來說一下這些presets的作用

es2015+ 是Babel官方推出的用來轉譯已經進入標準的es2015+的語法。
進入標準該怎麼理解呢 就是說一羣ES標準制定的人經過好幾次開會，討論允許使哪些新的語法進入ES2015+標準，據我現在所知常用的es2015+語法且沒有進入標準的例如：

• @修飾器語法
• …拓展運算符
• 箭頭函數
• …

先說進入標準的通過使用presets"es2015", "es2016", "es2017",即可但是npm install安裝的時候才發現

上面提示說presetes2015, es2016, es2017已經被Babel官方給廢棄掉了。官方推薦使用babel-preset-env

引用Babel官網的一句話

在沒有任何配置選項的情況下，babel-preset-env 與 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行爲完全相同

即：

// .babelrc
{
	presets: [
		"es2015",
		"es2016",
		"es2017"
	]
}
等同於
.babelrc
{
	"presets": [
		"env"
	]
}

是不是很方便只需要使用env一個就可以替換掉很多複雜的配置，更多配置詳見官網配置

Stage-x(階段)

stage-x和上面的es2015等有些類似，但是它是按照JavaScript的提案階段區分的，一共有5個階段。而數字越小，階段越靠後，存在依賴關係。也就是說stage-0是包括stage-1的

stage-4

已完成的提案，與年度發佈的release有關，包含2015年到明年正式發佈的內容。例如，現在是2016年，stage-4應該是包括es2015，es2016，es2017。經過測試，babel-preset-stage-4這個npm包是不存在的，如果你單純的需要stage-4的相關方法，需要引入es2015~es2017的presets

stage-0/1/2/3

那麼stage-0/1/2/3和es2015+的共同點在哪裏呢？
stage-x是按照階段提出來的，到了某一個階段之後提出一些新的特性有些進入了ECMA Script的標準，所以就被Babel團隊加入到了es2015+也就是babel-perset-env中了，但是有些還沒有進入標準，例如上面提到的@修飾器, ...拓展運算符, 箭頭函數等。
既然babel-preset-env的預設中沒有這些內容，那麼我們只能在.babelrc的配置文件中引入stage-x如

// .babelrc
{
	"presets": [
		"env",
		"stage-0"
	]
}

如果引入的預設stage-x過大的話，可以在預設中去掉stage-x轉而在Plugin中加入不支持的語法，如：

// .babelrc
{
	"presets": [
		"env",
	],
	"plugin": [
		"transform-decorators-legacy", // 轉譯@修飾器
		"transform-object-rest-spread" // 轉譯...拓展運算符
		”transform-arrow-functions“    // 轉譯箭頭函數
	]
}

stage-x的參數列表 請參考

該文章參考鏈接如下：

1. 如何寫好.babelrc
2. 關於Babel配置項的這點事