本節我們來學習 Babel 中的預設 Presets。如果我們不想手動的組合插件，可以使用 preset 作爲 Babel 插件的組合，或者共享 options 配置。
Babel7.8 官方的插件和預設有一百多種，如果我們一個個學習那需要大量的時間。但是我們也沒必要全部學習，因爲在實際使用中，常用的預設和插件也只有那幾個，我們重點掌握這些常用的即可，掌握後這樣其他的插件和預設就變得簡單啦。
官方Preset
官方針對常用的環境編寫了一些 preset，如下所示：
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
這幾個 preset 是社區維護的，可以通過 npm 命令下載。我們可以根據項目需要來下載使用，例如一個普通的 vue 項目，Babel 的官方預設中，只需要配一個 @babel/preset-env 就可以啦。
Stage-X實驗預設
stage-x 預置中的語法轉換會隨着被批准爲 JavaScript 新版本的組成部分而進行相應的改變（例如 ES6/ES2015）。
TC39 將提案分爲以下幾個階段：
- Stage 0 – 設想（Strawman）：只是一個想法，可能有 Babel 插件。
- Stage 1 – 建議（Proposal）：這是值得跟進的。
- Stage 2 – 草案（Draft）：初始規範。
- Stage 3 – 候選（Candidate）：完成規範並在瀏覽器上初步實現。
- Stage 4 – 完成（Finished）：將添加到下一個年度版本發佈中。
創建preset
如果我們需要創建一個自己的 preset，只需導出一份配置即可。
示例：
可以是一份插件數組，例如：
module.exports = function() {
return {
plugins: [
"pluginA",
"pluginB",
"pluginC",
]
};
}
preset 可以包含其他的 preset，以及帶有參數的插件：
module.exports = () => ({
presets: [
require("@babel/preset-env"),
],
plugins: [
[require("@babel/plugin-proposal-class-properties"), { loose: true }],
require("@babel/plugin-proposal-object-rest-spread"),
],
});
預設的路徑
如果 preset 在 npm 上，我們可以輸入 preset 的名稱，babel 將檢查是否已經將其安裝到 node_modules 目錄下：
{
"presets": ["babel-preset-myPreset"]
}
或者還可以指定指向 preset 的絕對或相對路徑，如下所示：
{
"presets": ["./myProject/myPreset"]
}
Preset的短名稱
如果 preset 名稱的前綴爲 babel-preset-，我們可以使用它的短名稱，也就是省略 babel-preset- 前綴。
示例：
例如 babel-preset-myPreset 短名稱爲 myPreset：
{
"presets": [
"babel-preset-myPreset", // 相當於myPreset
"myPreset"
]
}
這也適用於帶有冠名（scope）的 preset：
{
"presets": [
"@org/babel-preset-name", // 相當於@org/name
"@org/name"
]
}
Preset 的排列順序
preset 是逆序排列的，也就是從後往前排序。
示例：
我們來看下面這個例子：
{
"presets": [
"a",
"b",
"c"
]
}
執行順序爲 c、b 、 a，從後往前。這主要是爲了確保向後兼容，由於大多數用戶將 "es2015" 放在 "stage-0" 之前。
Preset的參數
插件和 preset 都可以接受參數，參數由插件名和參數對象組成一個數組，可以在配置文件中設置。
如果不指定參數，下面這幾種形式都是一樣的：
{
"presets": [
"presetA",
["presetA"],
["presetA", {}],
]
}
要指定參數，請傳遞一個以參數名作爲鍵（key）的對象，例如：
{
"presets": [
["@babel/preset-env", {
"loose": true,
"modules": false
}]
]
}