在node中使用ts的compilerOptions.paths的簡單姿勢

愛甩尾巴的貓發表於2019-03-03
Compile

使用typescript開發node專案時，為了提高開發體驗，經常會配置paths對映模組路徑

{
	...
	"baseUrl": ".",
    "paths": {
      "@core": ["src/core"],
      "@interfaces": ["src/interfaces"],
      "@decorators": ["src/decorators"],
      "@constants": ["src/constants"],
      "@common": ["src/common"],
      "@services": ["src/services"],
      "@utils": ["src/utils"]
    }
}
複製程式碼

在使用中就可以直接引入相應的模組，十分方便

操作

方便歸方便，但是ts只是做了一層對映關係，在編譯階段沒有將程式碼替換，編譯後的js程式碼中依然會存在

js

在啟動時會丟擲如下異常

can not find XXX module
複製程式碼

由於改變編譯後的js程式碼會導致sourceMap會失效，但是經過除錯發現只要不改變行數，sourceMap依然會能獲取正確的程式碼位置，所以我打算在tsc編譯後，通過掃輸出目錄，再根據對映關係，替換其中字元, 這樣即能正確執行，又能正確的deubg。

使用commander製作命令列工具

思路比較簡單，先通過tsc編譯原始碼，然後再通過fs操作編譯後的檔案替換相應的字元


// 定義了三個引數

program
  .version(packAge.version)
  // 編譯的目標目錄
  .command("build <projectPath>")
  .description("transform tsconfig.json paths")
  // 檢視日誌
  .option("-d, --debug")
  // 指定tsconfig.json檔案路徑
  .option("-t, --tsconfigName [tsconfigName]")
  .action((projectPath, opt) => {
    // 具體操作
  });

複製程式碼

// 第一步： 將tsconfig.json檔案輸出稱json資料
let compilerOptions = await filesToJson<ICompilerOptions>(tsconfigPath, [
  "compilerOptions"
]);

// 第二步： 編譯操作
await this._buildTsc(tsconfigPath);

// 第三步： 替換編譯後資料夾中的相應字元
await this._transformPaths(
  join(tsconfigDir, targetRootDir),
  join(tsconfigDir, outDir),
  pathsConfig
);

複製程式碼

最後，提交npm包，之後在專案中就可以愉快的玩耍了


yarn add --dev ts-paths

npx ts-paths build ./ -t tsconfig.json -d

複製程式碼

專案地址: https://github.com/soraping/ts-paths

相關文章