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 =
  | false
  | 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,
  },
];

Disable Default Config#

You can manually set transformImport: false to disable the default config.

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

You can also use the function usage of transformImport to modify the default configuration.

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

For example, if you use externals to avoid bundling antd, because transformImport will convert the imported path of antd by default, the matching path changes and externals cannot take effect. At this time, you can disable transformImport to avoid this problem.