來自 tsconfig.json 的路徑在 tsc 之后不起作用

Question

在我的 Express 項目中，我從@common/foo類的路徑導入。 感謝tsconfig.json中的paths ，它只是../common/src/foo的別名。 這太棒了，可以在nodemon.json中使用這個腳本進行開發：

{
    "watch": ["src", "../common/src"],
    "ext": "ts",
    "ignore": ["src/public"],
    "exec": "ts-node -r tsconfig-paths/register src/index.ts"
  }

問題是我不能讓它在生產模式下工作。

我用tsc構建項目，如果我檢查生成的文件，它們會從@common/而不是從../common/src/導入內容。 起初我認為這很好，因為tsconfig-paths在運行時工作，所以我只需要將它包含在start腳本中，如下所示：

node -r tsconfig-paths/register dist/index.js

不幸的是它沒有用，我在控制台中收到了Cannot find module '@common/foo錯誤消息。

有什么問題？ 我配置錯了嗎？

---

我的package.json （刪除了所有不相關的部分）：

{
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=prod node dist/index.js",
    "build": "rimraf ./dist/ && cross-env NODE_ENV=prod tsc"
  },
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.4",
    "@types/node": "^13.11.0",
    "cross-env": "^6.0.3",
    "rimraf": "^3.0.2",
    "ts-node": "^8.8.2",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^3.8.3"
  }
}

我的tsconfig.json （刪除了所有不相關的部分）：

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "outDir": "dist",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "target": "es6",
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "paths": {
      "@common/*": [
        "../common/src/*"
      ]
    }
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./src/dist/"
  ],
  "references": [
    {
      "path": "../common"
    }
  ]
}

Answer 1

對於仍然堅持這一點的任何人：

node -r ts-node/register/transpile-only -r tsconfig-paths/register dist/index.js

這是你需要做的。

Answer 2

這在很多地方都被問到了，顯然 Typescript 可以為開發創建路徑別名，但不能為生產創建路徑別名（不要引用我的話，已經使用它僅僅一個月了）。

為了解決這個問題，我安裝了“module-alias”，一個 package 解決了構建后的路徑問題，而不干擾開發。

我正在構建一個 Express-js 應用程序，並擁有以下文件：

server.js：

import env from '@env';
import app from './app';

app.listen(env.SERVER_PORT || 3000);

tsconfig.json（相關部分）：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@env": ["path/to/env"]
    }
  }
}

這解決了開發運行時的路徑，但不是在使用“tsc”構建之后。 為了解決這個問題，我添加了“模塊別名”package 並進行了以下更改：

server.js：

import './paths';
import env from '@env';
import app from './app';

app.listen(env.SERVER_PORT || 3000);

路徑.js

import 'module-alias/register';
import { addAliases } from 'module-alias';

addAliases({
  '@env': `${__dirname}/path/to/env`,
});

這確保了 @env 在開發運行時和構建后都會解析。 希望能幫助到你！

Answer 3

還嘗試使用 tsc 構建但由於別名而失敗。 閱讀 ts-node 作者的評論后，我跳過構建階段並在生產中運行

ts-node --transpileOnly -r tsconfig-paths/register src/server.ts

Answer 4

如果你不想在生產環境中使用 ts-node，你可以在運行時創建一個新的 js 文件到 map 你的路徑：

// tsconfig-paths.js

const tsConfig = require('./tsconfig.json');
const tsConfigPaths = require('tsconfig-paths');

let { baseUrl, paths } = tsConfig.compilerOptions;

// Replacing "src" by "dist" in typescript paths map
for (path in paths) {
  paths[path] = paths[path].map((path) => path.replace("src", "dist"));
}

tsConfigPaths.register({ baseUrl, paths });

然后將其添加到節點參數：

// package.json
// ...
  "scripts": {
    "build": "tsc",
    "start": "node -r ./tsconfig-paths.js dist/main.js",
// ...