怎样同时在一个项目中同时启动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兼容模式解析,这可能导致意外行为或错误,尤其是当存在顶层await等ESM特有特性时。** "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项目同时启动