typescript 打字脚本路径在Express项目中无效

gdrx4gfi  于 2023-03-31  发布在  TypeScript
关注(0)|答案(6)|浏览(139)

我正在尝试使用TypeScript的路径功能,这样我就不需要再使用相对导入了。
下面是我的 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": {
    // Dependencies here
  },
  "devDependencies": {
    // Dependencies here
  },
}

所以现在在我的一个文件中,我尝试@config/typeConfig,但我只是得到cannot find module错误。
也许是因为nodemon的原因,但它在ts-node上也不起作用。我怎么才能让它起作用呢?

mec1mxoz

mec1mxoz1#

注意:对于一个使用 nodemon 的工作示例,请跳到我的答案的第二部分。
如果你的意思是一旦你编译了文件并运行了应用程序,模块就找不到了,那么看看这个线程:Module path maps are not resolved in emitted code
“paths”是为与允许重Map的加载器一起使用而设计的
假设我的 * tsconfig.json * 中有以下路径:

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

我需要一个文件使用该路径在一个文件

import test from '@config/test';

查看编译后的文件,最后得到

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

正如你所看到的,路径没有被解析,它仍然是@config/test。当使用 nodemonts-node 测试你的应用时,也会发生同样的事情。
此外,您需要使用Typescript路径别名解析器,例如tspath
TypeScript编译器将能够解析路径,因此这将编译没有问题,但是JavaScript输出将不可能通过Node或Web浏览器执行,为什么?原因很简单!
JavaScript引擎对编译时TypeScript配置一无所知。
为了运行JavaScript代码,现在需要再次将路径别名转换为相对路径,此时TSPath开始发挥作用。
也就是说,如果你想让事情与 nodemon 一起工作,下面的配置就可以了。事先,确保你安装了tsconfig-paths

npm i tsconfig-paths

使用此函数加载模块,模块的位置在tsconfig.json的paths部分指定。支持运行时加载和API加载。(...)如果需要此包的tsconfig-paths/register模块,则会从tsconfig.json读取路径,并将节点的模块加载调用转换为节点可以加载的物理文件路径
完美,我们将使用-r tsconfig-paths/register执行node以将路径转换为物理文件路径,并使用-r ts-node/register动态执行ts文件,nodemon 将在更改时重新启动应用程序。
在你的 package.json 中,你需要添加这个(根据需要修改):

"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"
        }

请注意为 nodemon 添加的配置。
最后

npm run dev

一切都应该很顺利。

jjhzyzn0

jjhzyzn02#

jperl的回答完全正确。
但如果您想要一个简单的解决方案:

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

只需 * 记住 * 安装 tsconfig-paths/register

npm i -D tsconfig-paths
ohtdti5x

ohtdti5x3#

发展

npm i -save-dev tsconfig-paths/register

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
}

package.json

"scripts": {
  dev: "ts-node -r tsconfig-paths/register src/index.ts"
}

版本

npm i -save-d ttypescript @zerollup/ts-transform-paths

tsconfig.json

{
 "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
    },   
  }
 "plugins": [
      {
          "transform": "@zerollup/ts-transform-paths",
      }
  ],
}

package.json

"scripts": {
  build: "ttsc -P ./tsconfig.json"
}
pb3skfrl

pb3skfrl4#

在我的特殊情况下,使用“tsc-alias”,这是我的步骤:
1.安装软件包npm install --save-dev tsc-alias
1.将我在package.json中编译的命令更改为"build": "tsc && tsc-alias"
1.修改我的tsconfig.json,因为我没有outDir,所以它看起来像这样:

{
   "compilerOptions": {
      "outDir": "miniprogram",
      "baseUrl": "miniprogram",
      "paths": {
       "lib / *": ["./lib/*"]
     },
...
}

注意:如果不添加outDir,则会出现以下错误:“未设置compilerOptions.outDir”

在导入时,我会:import {Util} from "lib/my/path/util";

nuypyhwy

nuypyhwy5#

TL;DR:删除所有.js文件

对于那些没有使用上述正确解决方案的人:
在我的项目中,我在每个.ts文件下创建了“剩余”的.js文件(在过去的某个时候)。运行nodemon(反过来应该使用tsc)不会覆盖这些文件,并且我一直得到相同的Cannot resolve module要求堆栈错误。
删除所有.js文件为我修复了它。
有关如何以安全的方式实际操作的更多信息,请参阅此答案:Find (and delete) all files with a specified extension.请确保在删除文件之前确实查看了文件列表。

ny6fqffe

ny6fqffe6#

**第一步。**我们需要安装tsconfig-paths

npm i -D tsconfig-paths

第二步.在根路径下创建nodemon.json文件,与package.json同级
**第三步。**将下面的代码复制粘贴到nodemon.json文件中,代码中./src/app.ts这部分是一个快速执行点,请根据自己的情况进行修改。

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

**最后一步。**在package.json文件中编写执行脚本代码

"script": {
  "dev": "nodemon"
}

相关问题