# Import 插件

提供与 [babel-plugin-import](https://github.com/umijs/babel-plugin-import) 等价的能力和配置，基于 [SWC](https://swc.rs/) 实现。

:::tip
从 `@modern-js/module-tools` MAJOR_VERSION.16.0 版本开始，该插件功能内置在 Modern.js Module 中，由 [`transformImport`](api/config/build-config.html#transformimport)
配置提供。
:::

## 快速开始

### 安装

import { PackageManagerTabs } from '@theme';

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

### 注册插件

在 Modern.js Module 中，你可以按照如下方式注册插件：

```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,
        },
      ],
    }),
  ],
});
```

这样我们就可以在 Modern.js Module 中使用自动导入的能力了。

## 配置

- **类型：**

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

### pluginImport

- 类型：`object[]`

其中数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 [options](https://github.com/umijs/babel-plugin-import#options)。

使用示例：

```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 的 options 配置
        {
          libraryName: 'foo',
          style: true,
        },
      ],
    }),
  ],
});
```

## 注意事项

[SWC](https://swc.rs/) (Speedy Web Compiler) 是基于 Rust 语言编写的，而该插件是基于 SWC，移植自 [babel-plugin-import](https://github.com/umijs/babel-plugin-import)，配置选项保持了一致。

一些配置可以传入函数，例如 `customName`，`customStyleName` 等， 但在 Modern.js Module 里，我们不建议在此配置项里使用函数。
因为我们会在 esbuild 的插件里调用 SWC，然后再当 Rust 通过 Node-API 调用这些配置函数时，会出现死锁现象。

简单的函数逻辑其实可以通过模版语言来代替，下面是一个 `customName` 使用模板的示例：

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

添加以下配置：

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

其中的 `{{ member }}` 会被替换为相应的引入成员，转换后:

```ts
import Btn from 'foo/es/MyButton';
```

可以看出配置 `customName: "foo/es/{{ member }}"` 的效果等同于配置 `` customName: (member) => `foo/es/${member}`  `` 。

这里使用到的模版是 [handlebars](https://handlebarsjs.com)，模版配置中还内置了一些有用的辅助工具，还是以上面的导入语句为例，配置成：

```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 }}',
        },
      ],
    }),
  ],
});
```

会转换成下面的结果：

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

除了 `kebabCase` 以外还有 `camelCase`，`snakeCase`，`upperCase`，`lowerCase` 可以使用。