BUG解决:Typescript 编译后,别名无法编译成相对路径

167 阅读1分钟

前言:最近练习写了一个react组件库,编译打包后,由于路径问题无法直接使用...最后花了两天终于找到了解决方案.在此作个记录,方便自己,也方便他人.

bug呈现

编译后的效果图:@,仍然是@,没有变成相对路径,此时别的项目引入该组件库,则无法正常的导入组件. image.png 所有子文件路由也是这样. image.png

bug修复后

所有文件的路径@都被替换成了以index.js为目标的相对路径.其它项目导入该组件库,功能一切正常. image.png

image.png

bug修复方式

1.安装插件

npm install --save-dev tsc-alias

2.package.json -> scripts 编写命令 build-alias

tsc && tsc-alias 固定写法. tsconfig.json ts的配置文件,一般默认都是tsconfig.json.

// package.json
"scripts": {
    // 省略其它...
    "build-alias": "tsc && tsc-alias -p tsconfig.json",
    // 省略其它...
 }

3.命令使用方式.

先使用普通的方式编译出前文中路径仍是@的那种形式的文件,然后再使用npm run build-alias@路径进行纠正.

PS:由于本人太菜了,玩不来一条命令既能编译,又能直接改名的方式...所以只能采用这种比较low的方式..如果有巨佬可以指明一下用法..万分感谢..

完...