Babel 的插件配置

在项目中可使用三种方式配置 babel:

  1. babel.config.js，项目范围，采用单一模式（monorepo），需要编译node_modules。
  2. .babelrc.json，配置文件只适用于项目的某个部分。
  3. 在 package.json 中配置，等同于第二种。

    plugin 的使用

  • 在配置文件使用 plugins 的配置选项
  • 可以是字符串或者数组

  • 如果需要传递参数，就需要使用数组格式，数组第二个选项是参数

    1. const plugins = [
    2. [
    3.   'import',
    4.   {
    5.     libraryName: 'antd',
    6.     libraryDirectory: 'es',
    7.     style: true,
    8.   },
    9. ],
    10. 'lodash',
    11. '@babel/plugin-syntax-dynamic-import',
    12. [
    13.   '@babel/plugin-proposal-decorators',
    14.   {
    15.     legacy: true,
    16.   },
    17. ],
    18. ['@babel/plugin-proposal-class-properties', { loose: true }],
    19. [
    20.   '@babel/plugin-transform-runtime',
    21.   {
    22.     corejs: 2,
    23.     helpers: true,
    24.     regenerator: true,
    25.   },
    26. ],
    27. ];

    plugin 的格式

  • 返回对象的函数

  • 对象（和函数的区别就是不需要处理参数）。 ```javascript export default function(api, options, dirname) { return { inherits: parentPlugin, manipulateOptions(options, parserOptions) {
    1.   options.xxx = '';
    }, pre(file) {
    1. this.cache = new Map();
    }, visitor: {
    1. StringLiteral(path, state) {
    2.   this.cache.set(path.node.value, 1);
    3. }
    }, post(file) {
    1. console.log(this.cache);
    } }; } 
  1. ```javascript
  2. export default plugin =  {
  3.     pre(state) {
  4.       this.cache = new Map();
  5.     },
  6.     visitor: {
  7.       StringLiteral(path, state) {
  8.         this.cache.set(path.node.value, 1);
  9.       }
  10.     },
  11.     post(state) {
  12.       console.log(this.cache);
  13.     }
  14. };

preset

preset 就是对多个 plugin 的封装，通过引入 preset 来批量引入plugin 。preset 可以是一个函数也可以是一个对象，返回的 plugins、preset 的配置。
image.pngimage.png

名字

babel 对插件名字的格式有一定的要求，比如最好包含 babel-plugin，如果不包含的话也会自动补充。
babel plugin 名字的补全有这些规则：

  • 如果是 ./ 开头的相对路径，不添加 babel plugin，比如 ./dir/plugin.js
  • 如果是绝对路径，不添加 babel plugin，比如 /dir/plugin.js
  • 如果是单独的名字 aa，会添加为 babel-plugin-aa，所以插件名字可以简写为 aa
  • 如果是单独的名字 aa，但以 module 开头，则不添加 babel plugin，比如 module:aa
  • 如果 @scope 开头，不包含 plugin，则会添加 babel-plugin，比如 @scope/mod 会变为 @scope/babel-plugin-mod
  • babel 自己的 @babel 开头的包，会自动添加 plugin，比如 @babel/aa 会变成 @babel/plugin-aa