Next.js 13+项目中SWC如何转译内部模块桶文件导入路径？

我有一个基于Next.js和TypeScript的项目，正在优化代码分割与Tree Shaking效果。近期已升级至Next.js 13.x，并从Babel迁移至SWC。

项目中大量使用桶文件（index.ts）统一导出组件，示例如下：

// /components/index.ts
export { default as someComponent } from './someComponent';
// ... 更多组件导出

日常导入时偏好短路径风格：

import { someComponent } from '../components'

但这种桶文件导入会影响Tree Shaking，而直接导入单个组件的方式（如下）又过于繁琐，可读性差：

import someComponent from './components/someComponent'

此前用babel-plugin-transform-imports实现了将短路径导入转译为直接文件导入的功能，现在切换到SWC后，想知道如何配置实现对内部文件引用路径的转译。另外，项目已通过transpilePackages配置处理了第三方库的短导入：

// next.config.js
{
  // ...
  transpilePackages: ['libraryA', 'libraryB']
  // ...
}

方法一：使用SWC官方的@swc/plugin-transform-imports插件 #

这是babel-plugin-transform-imports的SWC替代方案，可直接配置处理内部路径：

1. 安装插件

npm install @swc/plugin-transform-imports --save-dev
# 或
yarn add @swc/plugin-transform-imports --dev

2. 修改next.config.js，添加SWC插件配置

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['libraryA', 'libraryB'],
  experimental: {
    swcPlugins: [
      ['@swc/plugin-transform-imports', {
        // 配置内部组件目录的转译规则
        '../components': {
          transform: (importName) => `../components/${importName}`,
          preventFullImport: true,
          skipDefaultConversion: false // 适配桶文件中默认导出转命名导出的规则
        },
        // 若有其他内部桶文件目录，如utils，可追加配置
        '../utils': {
          transform: (importName) => `../utils/${importName}`,
          preventFullImport: true,
          skipDefaultConversion: false
        }
      }]
    ]
  }
}

module.exports = nextConfig

3. 验证效果
   启动项目后，编译后的代码会自动将import { someComponent } from '../components'转译为import someComponent from '../components/someComponent'，既保留短导入的可读性，又不影响Tree Shaking。

方法二：结合TypeScript路径别名优化（可选） #

如果项目使用TypeScript路径别名（如@/components代替相对路径），可调整配置适配别名：

1. 在tsconfig.json中配置路径别名

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/components": ["components/index.ts"]
    }
  }
}

2. 修改SWC插件配置中的路径匹配

// next.config.js 中 swcPlugins 部分
['@swc/plugin-transform-imports', {
  '@/components': {
    transform: (importName) => `@/components/${importName}`,
    preventFullImport: true,
    skipDefaultConversion: false
  }
}]

关键配置说明 #

• preventFullImport: true：禁止导入整个桶文件（如import * as Components from '../components'），确保只转译单个命名导入。
• skipDefaultConversion: false：适配桶文件将默认导出转为命名导出的规则，转译时自动把命名导转回默认导入，匹配原组件的导出方式。

内容的提问来源于stack exchange，提问作者zkwsk