typeScript路径别名如何解决？在不使用webpack等情况下

前言 最近一段时间，因为公司不忙，也不怎么加班，便想着写一个开源的后台项目，前端用react18+ts，后端用koa2+ts，学习下后端知识，但是第一步，后端没有用webpack这些高集成的打包工具，而是直接用的tsx进行打包编译，最后发现这个路径别名有点难配置，最终历经些许折腾，终于成功配置，故此将我的配置过程写出来，帮助下有相同问题的小伙伴们；

一、在tsconfig.json文件中配置

tsconfig.json文件中的路径别名配置我们在前端项目中也会经常使用，其中两个关键的配置项就是baseUrl和path。

buseUrl： 是用来配置下面path路径的根路径。

path： 是用来设置相对应的路径映射的，数组里面的路径相对应的baseUrl的路径。

  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "@/*": [
        "src/*" // 该处的映射是相对于 baseUrl 的
      ]
    }
  },

上面我详细写一下两个配置项的意思，baseUrl中配置一个 . 的意思是当前根目录里，下面的path里面的"@/*"对应着的 "src/*" 是@ = src/，在ts解析后就是为 根目录/src/...，如果你将 baseUrl 里面配置为 './src'(根目录下的src文件夹下)的话，那么你如果要配置src外面的文件的话，paths里面就需要写'../nide_modules/等等',../就是src的上一层文件夹，其实这就是一个文件夹层数的问题，设置一个根路径，然后paths里面的配置项，都从根路径里面出发，可以随意怎样配置;

问题 这样配置完后，在项目中使用@路径映射，ts提示仍然无法找到包，并且项目无法运行报错，下面就需要其他额外的配置项来解决这个问题了！

二、安装 tsconfig-paths 解决找不到对应模块问题

2-1、安装 tsconfig-paths 包及原因

上面我们对tsconfig.json文件进行配置后，发现配置的不生效，ts-node并找不到模块，其实这个问题是因为tsc在编译代码的时候不会把路径别名替换成对应的相对路径，所以ts-node在对项目进行编译完成后，然后代码在node端执行，自然而然的就找不到这个 @/ 这个目录了，但是解决这个问题也很简单，只需要安装 tsconfig-paths 这个包即可：

npm i tsconfig-paths

2-2、package.json对命令行进行配置

这里我们只需要对package.json里面的dev改一下就可以了，其中tsnd是ts-node-dev，它可以缓存tsc的编译过程，它的热更新效率比nodemon + ts-node要快上很多，大家也可以在自己的node项目当中运用起来：

"dev": "tsnd -r tsconfig-paths/register --respawn src/main.ts",

然后重启项目后，发现就不会再报上面的错误了，但是项目打包后，还是会存在打包后项目的路径问题，此处我们还是需要再去解决；

三、安装 tsc-alias 解决打包后路径问题

因为上面的操作只是解决了tsc在热更新运行时的问题，但是打包后会出现，打包文件没有将别名进行编译，而是直接在打包后的文件中使用了别名路径，所以这当然是不可以的，下面我们就解决这个问题；

这里我们可以安装tsc-alias这个包对打包后的路径进行别名替换:

npm i tsc-alias

在package.json中对打包的命令行进行改造即可：

"build": "npm-run-all resetFolder compile && tsc-alias",

随后你再运行 npm run build 打包项目，你便会发现，打包后的文件中路径别名问题解决了；

tsc不会转换路径别名其实也是因为tsc的定位就是在开发阶段中使用的一个工具，他诞生的目的也就是为了优化开发体验，打包这项工作，并不是tsc的强项，应该教给webpack这些工具去做；

但是此时，有些小伙伴可能已经把这个问题解决了，但是还有些小伙伴们可能会遇到 eslint 的报错提醒，报错表示 eslint并不能识别路径别名，虽然功能可以正常使用，但是报错提醒看的着实让人头疼！

四、解决 eslint 报错问题

module.exports = {
  'parser': '@typescript-eslint/parser', //定义ESLint的解析器
  'extends': ['airbnb-base', 'plugin:@typescript-eslint/recommended'],//定义文件继承的子规范
  'plugins': ['@typescript-eslint'],//定义了该eslint文件所依赖的插件
  'env': {//指定代码的运行环境
    'browser': true,
    'node': true,
    'es2021': true
  },
  'settings': {
    //解决路径引用ts文件报错的问题
    'import/resolver': {
      'node': {
        'extensions': ['.js', '.jsx', '.ts', '.tsx']
      },
      // 解决tsconfig下的path别名导致eslint插件无法解决的bug
      'typescript': {
        'alwaysTryTypes': true
      }
    }
  },
}

解决问题参考的文章：typescript路径别名踩坑之旅

结语

因为自己也是第一次用koa写完整的后端项目（以前就写过一些demo），所以很多东西不是很熟悉，这个项目的开发环境也都是自己从头搭建的，所以一开始也没想着使用webpack，就直接用ts-node了，后面写着写着发现了，确实没有webpack方便，很多问题需要自己去解决，不过也在解决的过程中学习到了许多的知识点，也算是傻人有一点点傻福，也希望自己能够加油努力将这个开源项目顺利写完，加油！