无星的前端之旅（二十七）——ts路径alias

背景

好久没写前端的东西了，正好前段时间写typescript时用alias遇到了一些问题，今天来聊一聊。

alias

其实用web框架写应用的时候用的很多啊

比如层级很深的时候

import aa from "../../../utils/index"

通过配置alias，比如把根目录配置成@就会写成

import aa from "@/utils/index"

这样

具体的路径就不演示了，大家应该都能明白，都用过。

那么问题来了，在使用web应用的时候，大家都会搭配使用webpack，vite等打包工具

其实配置alias本质上是配置这些打包工具的

那么如果写的是个node项目呢？

如果是个node项目（不一定是服务端，也有可能是别的）不需要webpack等打包工具，该怎么办？

方式一：module-alias

module-alias

从readme看通过配置相关内容到package.json里，即可完成。

但因为看上去有4年没有更新了，所以我并没有选择这个方式。

不过我在它的issues里发现了一些有意思的东西.

issues#113

方式二：package.json的imports

是的，没错，package.json可以配置重命名。

来源就是上述提到的issues#113

我们可以使用imports来重命名文件夹

不过它必须使用#开头，这和写web时习惯使用@开头有点区别

不过我还是挺喜欢#开头的，因为使用@的，还有带命名空间的npm库，我觉得很容易混淆。

//package.json
{
    //....省略
    "imports": {
      "#actions/*": "src/actions/*",
      "#utils/*": "src/utils/*",
      "#types/*": "src/types/*",
      "#config/*": "src/config/*"
    }
}

既然是ts，那么当然免不了修改tsconfig.json配置

//tsconfig.json
{
    // ...省略
     "compilerOptions": {
        "baseUrl": ".",
        "paths": {
          "#actions/*": ["src/actions/*",],
          "#utils/*": ["src/utils/*",],
          "#types/*": ["src/types/*",],
          "#config/*": ["src/config/*",]
        },
      },
}

好，截止到这里，你的开发工具（vscode）已经可以正常识别你的import语句了

但是使用tsc构建会发现，路径还是会报错。

再查看输出的文件，会发现tsc编译出来的js文件，居然没有按我认为的预期把路径替换！

typescript/issues#5039我们可以看到讨论很激烈

按typescript的设计，预期就不会替换，只会原样输出

那么问题来了，怎么修正呢？

tsc-alias编译时使用

tsc-alias

修改一下打包命令

// package.json
{
    "scripts":{
        // "build": "rm -rf dist && tsc",
        "build": "rm -rf dist && tsc && tsc-alias",
    }
}

是的，只需要在后面加个tsc-alias就可以了。

tsconfig-paths开发时使用

tsconfig-paths

// package.json
{
    "scripts":{
        // "start": "ts-node ./src/index.ts"
        "start": "ts-node -r tsconfig-paths/register ./src/index.ts"
    }
}

Over