Modern.js Module
指南
API
插件
指南
API
插件
简体中文

Import 插件

提供与 babel-plugin-import 等价的能力和配置，基于 SWC 实现。

TIP

从 @modern-js/module-tools 2.16.0 版本开始，该插件功能内置在 Modern.js Module 中，由 transformImport 配置提供。

快速开始

安装

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-import -D

注册插件

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

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 中使用自动导入的能力了。

配置

  • 类型：
type Options = {
  pluginImport?: ImportItem[];
};

pluginImport

  • 类型：object[]

其中数组元素为一个 babel-plugin-import 的配置对象。配置对象可以参考 options。

使用示例：

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 (Speedy Web Compiler) 是基于 Rust 语言编写的，而该插件是基于 SWC，移植自 babel-plugin-import，配置选项保持了一致。

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

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

import { MyButton as Btn } from 'foo';

添加以下配置：

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

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

import Btn from 'foo/es/MyButton';

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

这里使用到的模版是 handlebars，模版配置中还内置了一些有用的辅助工具，还是以上面的导入语句为例，配置成：

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

会转换成下面的结果：

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

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