tools.babel

TIP

该配置由 Modern.js Builder 提供,更多信息可参考 tools.babel

  • 类型: Object | Function
  • 默认值: undefined

通过 tools.babel 可以修改 babel-loader 的配置项。

WARNING

在使用 Rspack 作为打包工具时,使用该配置项将在一定程度上拖慢 Rspack 构建速度。

Function 类型

tools.babel 为 Function 类型时,默认配置作为第一个参数传入,可以直接修改配置对象,也可以返回一个值作为最终结果,第二个参数提供了一些可以直接调用的工具函数:

export default {
  tools: {
    babel(config) {
      // 添加一个插件,比如配置某个组件库的按需引入
      // 目前内置了 antd 的按需引入规则
      config.plugins.push([
        'babel-plugin-import',
        {
          libraryName: 'xxx-components',
          libraryDirectory: 'es',
          style: true,
        },
      ]);
    },
  },
};

Object 类型

tools.babel 的值为 Object 类型时,会与默认配置通过 Object.assign 浅合并。

CAUTION

Object.assign 是浅拷贝,会完全覆盖内置的 presetsplugins数组,导致内置的 presets 或 plugins 失效,请在明确影响面的情况下再使用这种方式。

export default {
  tools: {
    babel: {
      plugins: [
        [
          'babel-plugin-import',
          {
            libraryName: 'xxx-components',
            libraryDirectory: 'es',
            style: true,
          },
        ],
      ],
    },
  },
};

工具函数

tools.babel 为 Function 类型时,第二个参数可用的工具函数如下:

addPlugins

  • 类型: (plugins: BabelPlugin[]) => void

添加若干个 Babel 插件。

export default {
  tools: {
    babel(config, { addPlugins }) {
      addPlugins([
        [
          'babel-plugin-import',
          {
            libraryName: 'xxx-components',
            libraryDirectory: 'es',
            style: true,
          },
        ],
      ]);
    },
  },
};

addPresets

  • 类型: (presets: BabelPlugin[]) => void

添加若干个 Babel 预设配置 (大多数情况下不需要增加预设)。

export default {
  tools: {
    babel(config, { addPresets }) {
      addPresets(['@babel/preset-env']);
    },
  },
};

removePlugins

  • 类型: (plugins: string | string[]) => void

移除 Babel 插件,传入需要移除的插件名称即可,你可以传入单个字符串,也可以传入一个字符串数组。

export default {
  tools: {
    babel(config, { removePlugins }) {
      removePlugins('babel-plugin-import');
    },
  },
};

removePresets

  • 类型: (presets: string | string[]) => void

移除 Babel 预设配置,传入需要移除的预设名称即可,你可以传入单个字符串,也可以传入一个字符串数组。

export default {
  tools: {
    babel(config, { removePresets }) {
      removePresets('@babel/preset-env');
    },
  },
};

addIncludes

  • 类型: (includes: string | RegExp | (string | RegExp)[]) => void

默认情况下 Babel 只会编译 src 目录下的业务代码,使用 addIncludes 你可以指定 Babel 编译 node_modules 下的一些文件。比如编译 query-string 依赖:

export default {
  tools: {
    babel(config, { addIncludes }) {
      addIncludes(/\/query-string\//);
    },
  },
};

TIP

addIncludes 函数的用法与 source.include 配置项基本一致,请查看 source.include 文档 来查看更详细的用法说明。也可以直接使用 source.include 来代替 addIncludes函数。

addExcludes

  • 类型: (excludes: string | RegExp | (string | RegExp)[]) => void

addExcludesaddIncludes 的用处相反,指定 Babel 编译时排除某些文件。

比如不编译 src/example 目录下的文件:

export default {
  tools: {
    babel(config, { addExcludes }) {
      addExcludes('src/example');
    },
  },
};

TIP

addExcludes 函数的用法与 source.exclude 配置项基本一致,请查看 source.exclude 文档 来查看更详细的用法说明。也可以直接使用 source.exclude 来代替 addExcludes函数。

modifyPresetEnvOptions

  • 类型: (options: PresetEnvOptions) => void

修改 @babel/preset-env 的配置项,传入的配置会与默认配置进行浅层合并,比如:

export default {
  tools: {
    babel(config, { modifyPresetEnvOptions }) {
      modifyPresetEnvOptions({
        targets: {
          browsers: ['last 2 versions'],
        },
      });
    },
  },
};

modifyPresetReactOptions

  • 类型: (options: PresetReactOptions) => void

修改 @babel/preset-react 的配置项,传入的配置会与默认配置进行浅层合并,比如:

export default {
  tools: {
    babel(config, { modifyPresetReactOptions }) {
      modifyPresetReactOptions({
        pragma: 'React.createElement',
      });
    },
  },
};
,