Import Plugin#

Using SWC provides the same ability and configuration as babel-plugin-import.

Quick Start#

Install#

npm add @modern-js/plugin-module-import -D

Register#

In Modern.js Module, you can register plugins in the following way:

import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginImport } from '@modern-js/plugin-module-import';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginImport({
      pluginImport: [
        {
          libraryName: 'antd',
          style: true,
        },
      ],
    }),
  ],
});

This way we can use the ability of automatic import in Modern.js Module.

Configurations#

• Type:

type Options = {
  pluginImport?: ImportItem[];
};

pluginImport#

• Type: object[]

The elements of the array are configuration objects for babel-plugin-import, which can be referred to options。

Example:

import { modulePluginImport } from '@modern-js/plugin-module-import';
import { moduleTools, defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginImport({
      pluginImport: [
        // babel-plugin-import`s options config
        {
          libraryName: 'foo',
          style: true,
        },
      ],
    }),
  ],
});

Notes#

SWC (Speedy Web Compiler) is written in Rust, and this plugin is based on SWC and ported from babel-plugin-import. The configuration options remain consistent.

Some configurations can be passed in as functions, such as customName, customStyleName, etc., but in Modern.js Module, we do not recommend using functions in these configuration items. Because we will call SWC in the esbuild plugin, and then when Rust calls these configuration functions through Node-API, a deadlock will occur.

Simple function logic can actually be replaced by template language. Below is an example of using a template with customName:

import { MyButton as Btn } from 'foo';

Add the following configuration on the right-hand side:

modulePluginImport({
  pluginImport: [
    {
      libraryName: 'foo',
      customName: 'foo/es/{{ member }}',
    },
  ],
});

The {{ member }} in it will be replaced with the corresponding import member. After transformation:

import Btn from 'foo/es/MyButton';

Template customName: 'foo/es/{{ member }}' is the same as customName: (member) => `foo/es/${member}` , but template value has no performance overhead of Node-API.

The template used here is handlebars. There are some useful builtin tools, Take the above import statement as an example:

import { modulePluginImport } from '@modern-js/plugin-module-import';
import { moduleTools, defineConfig } from '@modern-js/module-tools';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginImport({
      pluginImport: [
        {
          libraryName: 'foo',
          customName: 'foo/es/{{ kebabCase member }}',
        },
      ],
    }),
  ],
});

Transformed to:

import Btn from 'foo/es/my-button';

In addition to kebabCase, there are cameraCase, snakeCase, upperCase and lowerCase can be used as well.