ts-node报错ERR_UNKNOWN_FILE_EXTENSION

问题

  有个monorepo项目,在最外层一次性打包 3 个项目的脚本已经成功实现,如下:

"build:test": "cross-env NODE_ENV=test vite build --mode test && esno ./build/script/postBuild.ts",
"build:prod": "cross-env NODE_ENV=production vite build --mode production && esno ./build/script/postBuild.ts",

        为了防止提交错误,我想新增一个自动上传的脚本,但是~遇到了一个非常棘手的问题,我写了一个 deploy 脚本,希望实现半自动化实现 Vue 项目的上传ftp,在 script 中进行配置:

"deploy:test": "cross-env NODE_ENV=test ts-node ./deploy/index.ts",
"deploy:prod": "cross-env NODE_ENV=production ts-node ./deploy/index.ts",

         结果报错:

e6649c84297f45fd882b8108cc97849a.png

解决   

     在网上寻找了很多很多很多种解决方案,最终发现, 只要在 package.json 文件中将 【"type": "module"】删除,问题就解决了。

新的问题

        但是呢,新的问题出现了,项目跑不动了呀!【"type": "module" 】删除后,项目它就跑不动了!!!

a6d847ed178f4daf9c5cccc2b3769117.png

矛盾点

        这是非常矛盾的地方:

1、如果我把 package.json 中的 "type": "module" 删掉,那么就跑不动,也 build 不了,但是能 deploy 成功。

2、如果不删掉  "type": "module" ,那么就可以跑也可以 build,但是却无法 deploy。

最终解决方案

 package.json 中的 "type": "module", 依然保留,然后进行以下操作进行解决

① 修改 tsconfig.json

        在 tsconfig.json 文件中添加以下代码:

  "ts-node": {
    "transpileOnly": true,
    "files": true,
    "esm": true
  },
  "compilerOptions": {
    //配置编译选项
    "target": "ESNext",
    "module": "ESNext",
    "useDefineForClassFields": true,
    "moduleResolution": "node",
    // ......其他配置
  }

②修改 package.json

        在 package.json 中添加以下代码:

"deploy:test": "cross-env NODE_ENV=test node --loader ts-node/esm ./deploy/index.ts",
"deploy:prod": "cross-env NODE_ENV=production node --loader ts-node/esm ./deploy/index.ts",

这样就解决了问题!

需要的依赖

  "dependencies": {
    "@types/lodash": "^4.17.0",
    "ftp-deploy": "^2.4.7",
    "inquirer": "^10.1.5",
    "lodash-es": "^4.17.21"
  },
  "devDependencies": {
    "@types/node": "^20.11.19",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.5",
    "husky": "^8.0.0",
    "cross-env": "^7.0.3",
  }
  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值