Guide
Config
Plugin
API
Tutorials
Community
Guide
Config
Plugin
API
Tutorials
Community

source.transformImport

Transform the import path, which can be used to modularly import the subpath of third-party packages. The functionality is similar to babel-plugin-import。

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

When the Ant Design component library <= 4.x version is installed in the project, Modern.js will automatically add the following default configurations:

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

When the Arco Design component library is installed in the project, Modern.js will automatically add the following default configurations:

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

When you add configurations for antd or @arco-design/web-react, the priority will be higher than the default configurations mentioned above.

INFO

The usage of this configuration item is exactly the same as that of Rsbuild. For detailed information, please refer to Rsbuild - source.transformImport.