背景:随着react的使用我俨然已经成为了ts的深度使用者,时下react+ts+webpack的组合拳简直不要太香。作为把手伸向服务端的前端来说node是必不可少的一部分伴随着这个想法ts-node也被我提上了日程。
问题:webpack中的alias给我们提供了路径简写并在打包的时候替我们寻找文件因此我们不需要去担心打包之后的路径问题。但是ts-node我并不是通过webpack进行搭建的,因此在设置了tsconfig.json的paths路径简写在ts编译成js之后原本的路径简写并没有替换成相对路径导致找不到相关的文件。
思路:观察了打包的文件之后可以通过node获取tsconfig.json中的paths对象然后,通过fs递归遍历读取打包后的文件夹中的文件内容,通过匹配paths参数并替换经过层级处理过后的相对路径,判断时候有命中paths,否的话就跳过文件重写优化代码是的话重新改写文件
代码实现:
const path = require("path");
const fs = require("fs");
const json = path.resolve(__dirname, "./tsconfig.json");
const data = fs.readFileSync(json, "utf-8");
let pathList = data.match(/"@.*?\]/gm);
let outDir = data.match(/(?<="outDir":.").*/g)[0].match(/.*(?=",)/g)[0]; //