本节咱们来学习 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 }] ]}