简体中文

source.transformImport

转换 import 的路径，可以用于模块化引用三方包的子路径，能力类似于 babel-plugin-import。

类型:

type TransformImport =
  | false
  | Array<{
      libraryName: string;
      libraryDirectory?: string;
      style?: string | boolean;
      styleLibraryDirectory?: string;
      camelToDashComponentName?: boolean;
      transformToDefaultImport?: boolean;
      customName?: string;
      customStyleName?: string;
    }>
  | Function;

默认值:

当项目中安装了 Ant Design 组件库 <= 4.x 版本时，Modern.js 会自动添加以下默认配置：

const defaultAntdConfig = {
  libraryName: 'antd',
  libraryDirectory: isServer ? 'lib' : 'es',
  style: true,
};

当项目中安装了 Arco Design 组件库时，Modern.js 会自动添加以下默认配置：

const defaultArcoConfig = [
  {
    libraryName: '@arco-design/web-react',
    libraryDirectory: isServer ? 'lib' : 'es',
    camelToDashComponentName: false,
    style: true,
  },
  {
    libraryName: '@arco-design/web-react/icon',
    libraryDirectory: isServer ? 'react-icon-cjs' : 'react-icon',
    camelToDashComponentName: false,
  },
];

TIP

当你添加了 antd 或 @arco-design/web-react 相关的配置时，优先级会高于上述默认配置。

INFO

该配置项的使用方式与 Rsbuild 完全一致。详细信息请参考 Rsbuild - source.transformImport。

禁用默认配置

你可以手动设置 transformImport: false 来关掉 transformImport 的默认行为。

export default {
  source: {
    transformImport: false,
  },
};

你也可以使用 transformImport 的 function 用法对默认配置进行自定义修改。

export default {
  source: {
    transformImport: (imports) => {
      return imports.filter(data => data.libraryName !== 'antd');
    },
  },
};

比如，当你使用了 externals 来避免打包 antd 时，由于 transformImport 默认会转换 antd 的引用路径，导致匹配的路径发生了变化，因此 externals 无法正确生效，此时你可以设置关闭 transformImport 来避免该问题。

ON THIS PAGE

source.transformImport#

禁用默认配置#

source.transformImport

禁用默认配置