Babel 预设
本节我们来学习 Babel 中的预设 Presets。如果我们不想手动的组合插件，可以使用 preset 作为 Babel 插件的组合，或者共享 options 配置。
Babel7.8 官方的插件和预设有一百多种，如果我们一个个学习那需要大量的时间。但是我们也没必要全部学习，因为在实际使用中，常用的预设和插件也只有那几个，我们重点掌握这些常用的即可，掌握后这样其他的插件和预设就变得简单啦。
官方Preset
官方针对常用的环境编写了一些 preset，如下所示：
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
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，只需导出一份配置即可。
示例：
可以是一份插件数组，例如：
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"
]
}
【Babel 预设】这也适用于带有冠名（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
}]
]
}推荐阅读
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 全过程工程咨询——时间管理（12）
- (六)Component初识组件
- 二、Git|二、Git 基础操作
- 运行报错Cannot|运行报错Cannot find module '@babel/compat-data/corejs3-shipped-proposals’
- 曼陀罗解读第三期第一节课作业
- 搭建|搭建 vue-cli3 项目可选配置项
- 第四次作业打卡
- 欧美ins风电影胶片超市人像调色Lr预设分享
- Kibana环境部署