# Import Plugin

Using [SWC](https://swc.rs/) provides the same ability and configuration as [`babel-plugin-import`](https://github.com/umijs/babel-plugin-import).

:::tip
Since `@modern-js/module-tools` version >= MAJOR_VERSION.16.0, this plugin functionality is built into Modern.js Module and is provided by [`transformImport`](api/config/build-config.html#transformimport).
:::

## Quick Start

### Install

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/plugin-module-import -D" />

### Register

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

```ts
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**:

```ts
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](https://github.com/umijs/babel-plugin-import#options)。

**Example:**

```ts
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](https://swc.rs/) (Speedy Web Compiler) is written in Rust, and this plugin is based on SWC and ported from [babel-plugin-import](https://github.com/umijs/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`:

```ts
import { MyButton as Btn } from 'foo';
```

Add the following configuration on the right-hand side:

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

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

```ts
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](https://handlebarsjs.com). There are some useful builtin tools, Take the above import statement as an example:

```ts
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:

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

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