Express.js 在 ts 模式下运行 npm run dev 的时候无法找到引入项的原因

一、问题描述

我有个 express.js 写的后台,改写成了 ts 支持的,在使用 npm run dev 运行的时候出现错误

bash 复制代码
C:\Users\Administrator\AppData\Roaming\npm\yarn.cmd run dev
yarn run v1.22.22
$ npx ts-node bin/portal.ts
Error: Cannot find module 'entity/User'
Require stack:
- E:\website\portal\src\user\invitation.ts
- E:\website\portal\app.ts
- E:\website\portal\bin\portal.ts
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (C:\Users\Administrator\AppData\Local\npm-cache\_npx\1bf7c3c15bf47d04\node_modules\@cspotcode\source-map-support\source-map-support.js:811:30)

二、查找问题和解决

tsconfig.json 中设置了

json 复制代码
"paths": {
  "entity/*": ["./src/entity/*"],
}

所以所有在 /src/entity/ 的声明文件都能在 .ts 的文件中直接这样引用

ts 复制代码
import {EntityUser} from "entity/User"

这种写法等同于直接引用原始路径的使用

ts 复制代码
import {EntityUser} from "../../entity/User"

但是为什么不行呢?

问了下 cursor 它的回答是这样的:

我的 npm run dev 使用的指令是 npx ts-node , 当使用 ts-node 直接运行 ts 项目时,默认它是不会识别上面那个在 tsconfig.json 中的 paths 设置内容的,不生效。

需要单独安装一个插件 tsconfig-paths 来让它生效。

所以安装这个插件,我只喜欢用 yarn,而不喜欢用 npm 安装;

bash 复制代码
npm install --save-dev tsconfig-paths

再执行之前 npm run dev 就能正常使用了。

三、build 完成之后又遇到了问题

build 完成之后,运行 build 之后项目时遇到了新问题

bash 复制代码
C:\Users\Administrator\.pm2\logs\portal-error.log last 15 lines:
0|portal   |     at require (node:internal/modules/cjs/helpers:119:18)
0|portal   |     at Object.<anonymous> (E:\website\portal\dist\src\user\invitation.js:14:16)
0|portal   |     at Module._compile (node:internal/modules/cjs/loader:1198:14)
0|portal   |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
0|portal   |     at Module.load (node:internal/modules/cjs/loader:1076:32)
0|portal   |     at Function.Module._load (node:internal/modules/cjs/loader:911:12)
0|portal   |     at Module.require (node:internal/modules/cjs/loader:1100:19)
0|portal   |     at Module.Hook._require.Module.require (C:\Users\Administrator\AppData\Roaming\npm\node_modules\pm2\node_modules\require-in-the-middle\index.js:101:39) {
0|portal   |   code: 'MODULE_NOT_FOUND',
0|portal   |   requireStack: [
0|portal   |     'E:\\website\\portal\\dist\\src\\user\\invitation.js',
0|portal   |     'E:\\website\\portal\\dist\\app.js',
0|portal   |     'E:\\website\\portal\\dist\\bin\\portal.js'
0|portal   |   ]
0|portal   | }

当查看 build 之后生成的 js 文件时,发现 const User_1 = require("entity/User"); 还是使用的那种 alias 的方式引入,我以为在 build 之后它会自动替换成正确的路径,结果它没有变化。

js 复制代码
const express_1 = __importDefault(require("express"));
const Response_1 = require("../response/Response");
const utility_1 = require("../utility");
const router = express_1.default.Router();
const DB_NAME = 'diary';
const DATA_NAME = '邀请码';
const CURRENT_TABLE = 'invitations';
const crypto_1 = __importDefault(require("crypto"));

/// 下面这行 /
const User_1 = require("entity/User");
/

router.get('/list', (req, res) => {
    (0, utility_1.verifyAuthorization)(req)
        .then(userInfo => {
        let sqlArray = [];

题外: Cursor 算是个你可以随时问它的老辅助了,专业技能绝对高于 95% 的人,而且可以帮你完成所有机械的工作,处理表单是更方便,把所有无聊的工作都交给他就行。方便的很。

当然,它是支持任何语言的,对语言的理解是AI的基础技能。

所以我又问了 Cursor,它的答案是这样的:

1. 安装 module-alias

bash 复制代码
yarn add module-alias

2. package.json 中添加

json 复制代码
 "_moduleAliases": {
   "entity": "dist/src/entity"
 }

3. 在 app.ts 中添加

ts 复制代码
import 'module-alias/register'

处理完这些之后,再运行 dist 文件夹中 build 好的项目,果然可以了。

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
GuokLiu2 小时前
250708-Svelte项目从Debian迁移到无法联网的RHEL全流程指南
npm·svelte
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui