语言►nodejs►库►babel

babel配置中的plugins属性

本文作者: jsweibo

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

摘要

本文主要讲述了：

  1. 什么是 plugins
  2. plugins 的分类
  3. plugins 名称缩写
  4. 执行顺序
  5. 配置

正文

什么是 plugins

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

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

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

示例：

learn_babel/babel.config.js

1
2
3
4
module.exports = {
  plugins: [],
  presets: [],
};

plugins 的分类

根据实际用途，plugins 可以分为 2 类：

  1. 转换 plugins
  2. 语法 plugins

转换 plugins

转换 plugins 用于转换代码。

示例：使用@babel/plugin-transform-arrow-functions转换 ES6 中的箭头函数。

learn_babel/babel.config.js

1
2
3
module.exports = {
  plugins: ['@babel/plugin-transform-arrow-functions'],
};

源文件：

learn_babel/index.js

1
const fn = () => 1;

编译：

1
2
3
#!/usr/bin/env bash

npx babel index.js --out-file index.compiled.js

输出：

1
2
3
const fn = function () {
  return 1;
};

语法 plugins

语法 plugins 仅用于解析语法（不转换）。

注意：如果已经配置了转换 plugins，那么对应的语法 plugins 会自动开启，不再需要重复配置。

示例：使用babel-plugin-jsx解析 JSX 语法。

learn_babel/babel.config.js

1
2
3
module.exports = {
  plugins: ['babel-plugin-jsx'],
};

plugins 名称缩写

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

示例：

learn_babel/babel.config.js

1
2
3
4
5
6
module.exports = {
  plugins: [
    'myPlugin',
    'babel-plugin-myPlugin', // 等效
  ],
};

示例：

learn_babel/babel.config.js

1
2
3
4
5
6
module.exports = {
  plugins: [
    '@org/babel-plugin-name',
    '@org/name', // 等效
  ],
};

执行顺序

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

配置

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

示例：

learn_babel/babel.config.js

1
2
3
module.exports = {
  plugins: ['pluginA', ['pluginA'], ['pluginA', {}]],
};

参考资料

本文作者: jsweibo

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

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

支付宝
微信