打字稿路径在Express项目中不起作用

Question

我正在尝试使用打字稿路径功能，以便不再需要使用相对导入。

这是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": ".",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "allowJs": true,
    "paths": {
      "*": ["node_modules/*", "src/*"],
      "@config/*": ["src/config/*"],
      "@controllers/*": ["src/controllers/*"],
      "@middlewares/*": ["src/middlewares/*"],
      "@models/*": ["src/models/*"],
      "@routes/*": ["src/routes/*"],
      "@types/*": ["src/types/*"],
      "@utils/*": ["src/utils/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "firebase-config.json", "webpack.config.js"]
}

这是我的package.json

{
  "name": "express-ts-boilerplate",
  "version": "0.1.0",
  "description": "Express Typescript Boilerplate",
  "main": "src/server.js",
  "author": "Sriram R",
  "scripts": {
    "start": "NODE_ENV=production node dist/src/app.js",
    "dev": "nodemon src/app.ts",
    "build": "tsc -p .",
    "test": "mocha --exit -r ts-node/register src/tests/*.spec.ts"
  },
  "dependencies": {
    // deps here
  },
  "devDependencies": {
    // deps here
  },
}

所以现在在我的一个文件中，我尝试@config/typeConfig但我只是得到cannot find module错误。

也许是因为它，nodemon但是它也不起作用ts-node。有关如何使其正常工作的任何提示？

Answer 1

jperl 的回答是完全正确的。

但如果你想要一个单行解决方案：

nodemon -e ts,js --exec ts-node -r tsconfig-paths/register ./src/server.ts

只是记得安装tsconfig路径/注册：

npm i -D tsconfig-paths

Answer 2

注意：有关nodemon的工作示例，请跳至答案的第二部分。

如果您的意思是一旦编译了文件并运行应用程序，则找不到模块，然后看看此线程：模块路径映射未在发出的代码中解析

“路径”设计用于允许重新映射的加载器

说我在tsconfig.json中有这个路径：

"paths": {
      "@config/*": ["src/config/*"]
    }

我需要在文件中使用该路径的文件

import test from '@config/test';

查看编译的文件，我最终得到

var test_1 = __importDefault(require("@config/test"));

如您所见，路径尚未解析，仍为@ config / test。当使用nodemon和ts-node测试您的应用程序时，也会发生同样的事情。

In addition, you need to use a Typescript path alias resolver, like for exampletspath.

The TypeScript compiler will be able to resolve the paths so this will compile without problems, however the JavaScript output will not be possible to execute by Node nor a Web Browser, why? the reason is simple!

The JavaScript engine does not know anything about the compile time TypeScript configuration.

In order to run your JavaScript code, the path aliases now needs to be made into relative paths again, here is when TSPath comes into play.

That being said, if you want to make things work with nodemon, the following configuration will do. Beforehand, make sure you installed tsconfig-paths.

npm i tsconfig-paths

Use this to load modules whose location is specified in the paths section of tsconfig.json. Both loading at run-time and via API are supported. (...) If you require this package's tsconfig-paths/register module it will read the paths from tsconfig.json and convert node's module loading calls into to physcial file paths that node can load.

Perfect, we will execute node with -r tsconfig-paths/register to convert paths into physical file paths and -r ts-node/register to execute ts files on the fly and nodemon will restart the app upon changes.

In your package.json, you need to add this (modify it as needed):

    "nodemonConfig": {
          "ignore":
            [
              "**/*.test.ts",
              "**/*.spec.ts",
              ".git",
              "node_modules"
            ],
          "watch": [
            "src"
          ],
          "exec": "node -r tsconfig-paths/register -r ts-node/register ./src/server.ts",
          "ext": "ts, js"
        },
    "scripts": {
          "dev": "nodemon"
        }

Note the added configuration for nodemon.

And finally

npm run dev

And things should be running smoothly.