SWC编译时未给导入加扩展名，如何配置将.ts导入转为.js？

你遇到的问题是SWC默认不会给ES模块导入补全.js扩展名，导致浏览器无法找到对应文件。可以通过配置SWC的.swcrc文件来解决，无需在TS文件里写.js后缀的导入路径。

配置步骤 #

1. 在项目根目录创建或修改.swcrc配置文件，添加以下内容：

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false
    },
    "module": {
      "type": "es6",
      "resolveFully": true
    },
    "resolve": {
      "extensions": [".ts", ".js"]
    }
  },
  "outDir": "./dist"
}

2. 关键配置项说明：

• jsc.module.type: "es6"：指定输出ES模块格式的代码，适配浏览器的ES模块加载规则
• jsc.module.resolveFully: true：开启后SWC会自动把相对导入的路径补全为带.js扩展名的完整路径
• jsc.resolve.extensions：设置SWC解析文件时优先尝试的扩展名，确保能正确找到TS源文件

编译验证 #

配置完成后，执行SWC编译命令：

swc src --out-dir dist

此时你在src/index.ts里写的import foo from './foo'，会被编译成dist/index.js里的import foo from './foo.js'，浏览器就能正确加载dist/foo.js文件，不会再报404错误。

如果用npm scripts管理编译命令，可在package.json中添加：

"scripts": {
  "build": "swc src --out-dir dist"
}

之后运行npm run build即可完成编译。

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