场景

不使用vite或者Webpack一类的打包工具，只单纯的使用tsc作为打包工具，其他全为原生js或者ts代码，需要配置tsconfig.json和额外引入module-alias.js这个包来使用，换句话说，无法通过只配置tsconfig.json完成别名配置，必须搭配第三方包。

配置tsconfig.json

{
  "compilerOptions": {
  "paths": {
      "router/*": ["./src/router/*"],
      "@/*": ["./src/*"]
    },
    "baseUrl": "./",
  }
}

安装module-alias

npm i module-alias;

在package.json中配置路由字段

{
"_moduleAliases": {
    "@": "./src",
    "@router": "./src/router",
    "@entity": "./src/entity"
  }
}

在你的项目入口文件中，一般是项目根目录下的index.ts文件中，在第一行加入这段代码（推荐）

//index.ts
//你的第一行
require('module-alias/register');

module-alias这个包，也可以通过函数配置别名路径（不推荐）

// index.ts
const modelAlia = require('module-alias');
 modelAlia.addAliases({
   '@/*': __dirname + './src/*',
   '@router/*': __dirname + './src/router/*'
 })

这个方法我失败了，因此可以忽略这个，为了保证方法的多样性，随便提一提，就不展开了，统一使用package.json来配置路径别名即可。

问题说明

如果只配置tsconfig，你的确可以在项目中使用配置的路径别名了，但是，打包的时候编译器不会识别你配置的路由，因此必须引入第三方包，module-alias，这样就能保证你在开发阶段和打包阶段都能正确的使用路径别名了。
package.json中，_moduleAliases这个字段是位于根属性的。
一定要在index.ts的第一行加入require('module-alias/register');这段代码，保证你的代码在执行之前就已经被处理路径别名了。

以上的坑无力吐槽，希望Tsc官方早点解决这个问题吧，一个别名问题整那么复杂，难受。

526互联

node搭配ts设置路径别名

场景

问题说明