跳转到主文档

tools.babel

  • 类型: Object | Function
  • 默认值:{ presets: ['@modern-js/babel-preset-app'], plugins: [] }

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

类型

Object 类型

当此值为 Object 类型时,与默认配置通过 Object.assign 合并。

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

Function 类型

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

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

工具函数

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

addPlugins

添加 Babel 插件。

例如添加 babel-plugin-import

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

addPresets

添加 Babel 预设配置。

大多数情况下,我们不需要新增预设配置,内置的 @modern-js/babel-preset-app 已经能满足大部分需求。

modern.config.ts
export default defineConfig({
tools: {
babel: (config, { addPresets }) => {
addPresets([['@babel/preset-env', { targets: 'defaults' }]]);
},
},
});

removePlugins

删除 Modern.js 中默认集成的 Babel 插件,参数为需要删除的插件名:

modern.config.ts
export default defineConfig({
tools: {
babel: (config, { removePlugins }) => {
removePlugins(['babel-plugin-import']);
},
},
});

removePresets

删除 Modern.js 中默认集成的 Babel 预设配置,参数为需要删除的预设名:

modern.config.ts
export default defineConfig({
tools: {
babel: (config, { removePresets }) => {
removePresets(['@babel/preset-react']);
},
},
});

addIncludes

默认情况下,Modern.js 只会编译 src 目录下的业务代码,使用 addIncludes 可以指定 ts-loader 编译 node_modules 下的一些文件。

modern.config.ts
export default defineConfig({
tools: {
babel: (config, { addIncludes }) => {
addIncludes([/node_modules\/react/]);
},
},
});
info

不推荐使用 addIncludes 编译 node_modules 下的文件,建议使用 source.include 代替。

addExcludes

addIncludes 相反,指定 Babel 编译时排除某些文件。

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

modern.config.ts
export default defineConfig({
tools: {
babel: (config, { addExcludes }) => {
addExcludes([/src\/example/]);
},
},
});

插件信息

目前内部集成的 Babel 预设配置如下所示:

目前内部集成的 Babel 插件如下所示: