本節我們來學習 Babel 中的預設 Presets。如果我們不想手動的組合插件，可以使用 preset 作為 Babel 插件的組合，或者共享 options

本節我們來學習 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() {n return {n plugins: [n "pluginA",n "pluginB",n "pluginC",n ]n };n}n

preset 可以包含其他的 preset，以及帶有參數的插件：

module.exports = () => ({n presets: [n require("@babel/preset-env"),n ],n plugins: [n [require("@babel/plugin-proposal-class-properties"), { loose: true }],n require("@babel/plugin-proposal-object-rest-spread"),n ],n});n

預設的路徑

如果 preset 在 npm 上，我們可以輸入 preset 的名稱，babel 將檢查是否已經將其安裝到 node_modules 目錄下：

{n "presets": ["babel-preset-myPreset"]n}

或者還可以指定指向 preset 的絕對或相對路徑，如下所示：

{n "presets": ["./myProject/myPreset"]n}

Preset的短名稱

如果 preset 名稱的前綴為 babel-preset-，我們可以使用它的短名稱，也就是省略 babel-preset- 前綴。

示例：

例如 babel-preset-myPreset 短名稱為 myPreset：

{n "presets": [n "babel-preset-myPreset", // 相當于myPresetn "myPreset"n ]n}

這也適用于帶有冠名（scope）的 preset：

{n "presets": [n "@org/babel-preset-name", // 相當于@org/namen "@org/name" n ]n}

Preset 的排列順序

preset 是逆序排列的，也就是從后往前排序。

示例：

我們來看下面這個例子：

{n "presets": [n "a",n "b",n "c"n ]n}n

執行順序為 c、b 、 a，從后往前。這主要是為了確保向后兼容，由于大多數用戶將 "es2015" 放在 "stage-0" 之前。

Preset的參數

插件和 preset 都可以接受參數，參數由插件名和參數對象組成一個數組，可以在配置文件中設置。

如果不指定參數，下面這幾種形式都是一樣的：

{n "presets": [n "presetA",n ["presetA"],n ["presetA", {}],n ]n}n

要指定參數，請傳遞一個以參數名作為鍵（key）的對象，例如：

{n "presets": [n ["@babel/preset-env", {n "loose": true,n "modules": falsen }]n ]n}n