babel配置中的presets属性

目录

1. 摘要
2. 正文
   1. 什么是presets
   2. 官方presets
   3. 实验presets
   4. presets名称缩写
   5. 执行顺序
   6. 配置
3. 参考资料

---

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/05/babel%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84presets%E5%B1%9E%E6%80%A7/

摘要

本文主要讲述了：

1. 什么是presets
2. 官方presets
3. 实验presets
4. presets名称缩写
5. 执行顺序
6. 配置

正文

什么是presets

babel是 JavaScript 编译器。但开箱即用的babel什么也不做。它只会把源文件复制到构建目录去。

要让babel做事情，必须配置plugins（插件）和presets（预设）属性。

plugins指单个插件，presets指一组预设的插件集。

示例：

learn_babel/babel.config.js

module.exports = {
  plugins: [],
  presets: [],
};

官方presets

• @babel/preset-env
• @babel/preset-react
• @babel/preset-typescript

实验presets

TC39 委员会将提案分为以下阶段：

• stage-0 稻草人 只是想法
• stage-1 提案 值得做
• stage-2 草案 初始规格
• stage-3 候选人 完整规格
• stage-4 完成 将在下一年被添加进新版本语言规范

对于前 4 个阶段的提案，babel 提供了实验presets：

• @babel/preset-stage-0
• @babel/preset-stage-1
• @babel/preset-stage-2
• @babel/preset-stage-3

presets名称缩写

如果presets的名称以babel-preset-作为前缀，那么可以在配置的时候，将前缀省略。

示例：

learn_babel/babel.config.js

module.exports = {
  presets: [
    'myPreset',
    'babel-preset-myPreset', // 等效
  ],
};

示例：

learn_babel/babel.config.js

module.exports = {
  presets: [
    '@org/babel-preset-name',
    '@org/name', // 等效
  ],
};

执行顺序

1. plugins总是先于presets执行
2. 多个plugins之间按照顺序依次执行
3. 多个presets之间按照逆序依次执行

配置

plugins和presets都可以通过将名称和配置对象封装在数组里的方式进行配置。

示例：

learn_babel/babel.config.js

module.exports = {
  presets: ['presetA', ['presetA'], ['presetA', {}]],
};

参考资料

• presets

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/05/babel%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84presets%E5%B1%9E%E6%80%A7/

---

本文对你有帮助？请支持我

---

支付宝

微信

---

• 本文作者： jsweibo
• 本文链接： https://jsweibo.github.io/2019/08/05/babel%E9%85%8D%E7%BD%AE%E4%B8%AD%E7%9A%84presets%E5%B1%9E%E6%80%A7/
• 版权声明： 除非另有说明，否则本网站上的内容根据署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。