SWC Plugin Import Transform

English README

一个 SWC 插件，用于将模块的命名导入转换为单独的模块导入，兼容 babel-plugin-transform-imports 的功能。

安装

npm install swc-plugin-import-transform

基本用法

在 .swcrc 中配置

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "swc-plugin-import-transform",
          {
            "lodash": {
              "transform": "lodash/${member}",
              "prevent_full_import": true
            }
          }
        ]
      ]
    }
  }
}

在 webpack 中使用 (swc-loader)

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              experimental: {
                plugins: [
                  [
                    'swc-plugin-import-transform',
                    {
                      'lodash': {
                        transform: 'lodash/${member}',
                        prevent_full_import: true
                      }
                    }
                  ]
                ]
              }
            }
          }
        }
      }
    ]
  }
};

配置选项

transform

类型: string | object

字符串模式

指定转换路径模板，支持模板变量：

{
  "lodash": {
    "transform": "lodash/${member}"
  }
}

对象模式（映射）

为每个成员单独配置路径：

{
  "ty-ad": {
    "transform": {
      "BasicForm": "ty-ad/packages/bases/basicForm",
      "UploadFile": "ty-ad/packages/bases/upload"
    }
  }
}

fallback

类型: string

当 transform 为对象时，未匹配到成员时使用的兜底路径，支持模板变量：

{
  "ty-ad": {
    "transform": {
      "BasicForm": "ty-ad/packages/bases/basicForm"
    },
    "fallback": "ty-ad/src/utils/${member:snakeCase}"
  }
}

prevent_full_import

类型: boolean
默认值: false

阻止全量导入被转换：

{
  "lodash": {
    "transform": "lodash/${member}",
    "prevent_full_import": true
  }
}

skip_default_conversion

类型: boolean
默认值: false

保持命名导入形式而不转换为默认导入：

{
  "element-ui": {
    "transform": "element-ui/lib/${member:kebabCase}",
    "skip_default_conversion": true
  }
}

模板变量

在 transform 或 fallback 中可以使用以下模板变量：

• ${member}: 原始名称
• ${member:camelCase}: 小驼峰命名（如 myComponent）
• ${member:PascalCase}: 大驼峰命名（如 MyComponent）
• ${member:snakeCase}: 下划线命名（如 my_component）
• ${member:kebabCase}: 短横线命名（如 my-component）
• ${member:SHOUTY_SNAKE_CASE}: 全大写下划线（如 MY_COMPONENT）
• ${member:SHOUTY-KEBAB-CASE}: 全大写短横线（如 MY-COMPONENT）

转换示例

基本转换

输入:

import { map, filter, reduce } from 'lodash';

配置:

{
  "lodash": {
    "transform": "lodash/${member}"
  }
}

输出:

import map from 'lodash/map';
import filter from 'lodash/filter';
import reduce from 'lodash/reduce';

使用大小写转换

输入:

import { RadioButton } from 'element-ui';

配置:

{
  "element-ui": {
    "transform": "element-ui/lib/${member:kebabCase}"
  }
}

输出:

import RadioButton from 'element-ui/lib/radio-button';

使用映射和兜底

输入:

import { BasicForm, UploadFile, CustomUtil } from 'ty-ad';

配置:

{
  "ty-ad": {
    "transform": {
      "BasicForm": "ty-td/packages/bases/basicForm",
      "UploadFile": "ty-td/packages/bases/upload"
    },
    "fallback": "ty-td/src/utils/${member:kebabCase}",
    "prevent_full_import": true,
    "skip_default_conversion": true
  }
}

输出:

import { BasicForm } from 'ty-td/packages/bases/basicForm';
import { UploadFile } from 'ty-td/packages/bases/upload';
import { CustomUtil } from 'ty-td/src/utils/custom-util';

注意事项

1. 只有在配置中指定的库会被转换，其他库保持不变
2. 当使用 prevent_full_import: true 时，包含默认导入的语句不会被转换
3. 当使用 skip_default_conversion: true 时，会保持命名导入的形式