node搭配ts设置路径别名
场景
不使用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官方早点解决这个问题吧,一个别名问题整那么复杂,难受。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性