commonjs、module 模块同时启动

怎样同时在一个项目中同时启动node服务和我们前端项目(commonjs、module 模块同时启动)

今天在使用node实现完增删改查的接口之后,将自己node代码嵌入到我们react项目中
启动完前端项目之后,当我使用node service.js的时候,控制台报错,第一反应就是 package.json 中type不对

❓: package.json 中type的作用
💡:


 ** "type": "commonjs"**: 
 此配置或省略此字段(即默认值)指示Node.js应以CommonJS方式处理模块。
 这意味着即便文件中使用了import/export语法,Node.js也会尝试以CommonJS兼容模式解析,
 这可能导致意外行为或错误,尤其是当存在顶层awaitESM特有特性时。

** "type": "module"**: 
明确告知Node.js应按ESM标准解析模块。
这意味着项目中的.js文件将被视为ES模块,除非文件扩展名为.cjs,后者会被特殊处理为CommonJS模块。
此配置启用ESM的所有特性,包括但不限于动态导入、顶级等待(top-level await)、严格模式自动启用等。

❓:在一个react 项目中怎么既可以执行node 代码又可以启动正常的react 项目 ,不然每次都要切换package.json文件中 “type”: “module”, 或 commonjs

方案1: 分离项目结构(Monorepo)

前端目录(例如/client):包含React应用,可以正常使用ES模块。
后端目录(例如/server):存放Node.js服务器代码,使用CommonJS或ES模块,根据需要设置"type"字段。

方案2: 使用脚本或工作流工具

 npm install --save-dev concurrently
 或
 yarn add -D concurrently

配置package.json

 {
  "scripts": {
    "start:react": "vite", // 或者使用"react-scripts start"取决于你使用的React脚手架
    "start:server": "node server/index.js", // 假设你的Node.js服务器入口是server/index.js
    "start": "concurrently \"npm:start:react\" \"npm:start:server\"",
    // 或者使用npm-run-all的写法
    // "start": "run-p start:react start:server"
  }
}

我自己的配置如下

   "scripts": {
    "start:dev": "vite &&  npm run start",
    "service": "node service/index.js",
    "start:service": "node interface/index.js",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "start": "concurrently \"npm:start:dev\" \"npm:start:service\""
  },

取掉我们的type属性,执行 npm run start 即可实现node服务和react项目同时启动

img

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

光头程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值