Typescript 路径在 Express 项目中不起作用

问题描述 投票：0回答：7

我正在尝试使用 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
。 我怎样才能让它发挥作用？

typescript nodemon ts-node
7个回答
105
投票

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

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

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

假设我的 tsconfig.json 中有此路径：

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

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

import test from '@config/test';

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

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

可以看到，路径还没有解析，仍然是@config/test。使用 nodemon 和 ts-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 读取路径，并将节点的模块加载调用转换为节点可以加载的物理文件路径。

完美，我们将使用
node

执行 

-r tsconfig-paths/register
将路径转换为物理文件路径，使用 
-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 

事情应该进展顺利。

29
投票
jperl的答案

是完全正确的。 如果您想要单行解决方案：

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

只需
记住

安装tsconfig-paths/register：

npm i -D tsconfig-paths



如果您不想在 CLI 命令或 npm 脚本中要求 
-r tsconfig-paths/register
，而希望在 ts-node 配置中要求它，则可以在 
tsconfig.json
 中执行此操作，如下所示：
// in tsconfig.json
{
  // ... other TypeScript configuration
  "ts-node": {
    "require": ["tsconfig-paths/register"]
  }
}


    



      

      
      
      

      

        

          

            

              
2
投票

              
            

          

        

        
第一步。
我们需要安装 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"
}


    



      

      
      
      

      

        

          

            

              
1
投票

              
            

          

        

        
tsc-alias
”，这是我的步骤：


安装包
    npm install --save-dev tsc-alias
  1. 将 package.json 中编译的命令更改为 
    2. "build": "tsc && tsc-alias"
  2. 修改我的 tsconfig.json 因为我没有 
    3. outDir
  3. ，所以它看起来像这样：


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



注意：
如果我不添加outDir，则会出现以下错误：“compilerOptions.outDir未设置”
然后在导入它时我会：

import {Util} from "lib/my/path/util";
    





      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        
发展

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


    



      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


对于那些没有通过上述正确解决方案进行管理的人：


在我的项目中，我在每个 .ts 文件下创建了“剩余”.js 文件（在过去的某个时刻）。
运行 
nodemon
 （反过来应该使用 
tsc
）并没有覆盖这些文件，并且我不断收到与 
Cannot resolve module
 相同的 require 堆栈错误。
删除所有 .js 文件为我解决了这个问题。


有关如何以安全的方式实际执行此操作的更多信息，请参阅此答案：
查找（并删除）具有指定扩展名的所有文件
。确保在删除文件之前确实检查了文件列表。
    




      

      
      
      

      

        

          

            

              
0
投票

              
            

          

        

        


npm i tsx



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


    

      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.