commonjs、module 模块同时启动

发布于:2024-07-11 ⋅ 阅读:(108) ⋅ 点赞:(0)

怎样同时在一个项目中同时启动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


网站公告

今日签到

点亮在社区的每一天
去签到