commonjs、module 模块同时启动

news2024/11/29 0:44:03

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