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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41558.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity 简单载具路线 Waypoint 导航

前言 在游戏开发和导航系统中,"waypoint" 是指路径中的一个特定位置或点。它通常用于定义一个物体或角色在场景中移动的目标位置或路径的一部分。通过一系列的 waypoints,可以指定复杂的移动路径和行为。以下是一些 waypoint 的具体用途&…

用Python轻松转换PDF为CSV

数据的可访问性和可操作性是数据管理的核心要素。PDF格式因其跨平台兼容性和版面固定性,在文档分享和打印方面表现出色,尤其适用于报表、调查结果等数据的存储。然而,PDF的非结构化特性限制了其在数据分析领域的应用。相比之下,CS…

【国产开源可视化引擎Meta2d.js】图元

图元 又称画笔Pen。图形表达的基本元素,组成图像的基本单元。 构成 每一个图元由ID、名字、类型、属性(数据)组成。 ID 名为“id”的特殊属性,图元实例(画布上的图元对象)的唯一标识。拖拽到画布或创建…

【线性代数的本质】矩阵与线性变换

线性变化要满足两点性质: 直线(连续的点)在变换后还是直线。原点不变。 假设有坐标轴(基底) i ^ \widehat{i} i 和 j ^ \widehat{j} j ​: i ^ [ 1 0 ] , j ^ [ 0 1 ] \widehat{i}\begin{bmatrix} 1 \…

《昇思25天学习打卡营第6天|网络构建》

文章目录 前言:今日所学:1. 定义模型类2. 模型层3. 模型参数 前言: 在第六节中我们学习了网络构建,了解了神经网络模型是由神经网络层和Tensor操作构成,我们使用的mindspore.nn中提供了常见的升级网络层的实现&#x…

在线图片转文字的软件,分享3种强大的软件!

在信息爆炸的时代,图片作为信息的重要载体之一,其内容往往蕴含着巨大的价值。然而,面对海量的图片信息,如何高效、准确地将其转化为文字,成为了许多人的迫切需求。今天,就为大家盘点几款功能强大的在线图片…

【python基础】—如何理解安装程序时要配置Widows和DOS操作系统中的path环境变量?

文章目录 前言一、环境变量是什么?二、为什么需要设置环境变量?三、配置anaconda的环境变量 前言 在安装一些程序的时候, 我们总是需要将安装路径配置到正在使用电脑的环境变量里。为什么要进行这一步呢?本文主要解释Widows和DOS…

特殊用途二极管+二极管故障检测+三极管(BJT)的工作原理+定时器的使用(小灯定时闪烁实现)

2024-7-5,星期五,17:27,天气:晴,心情:晴。今天没有什么特殊的事情发生,继续学习啦,加油加油!!! 今日完成模电自选教材第二章内容的学习&#xff…

1-4 NLP发展历史与我的工作感悟

1-4 NLP发展历史与我的工作感悟 主目录点这里 第一个重要节点:word2vec词嵌入 能够将无限的词句表示为有限的词向量空间,而且运算比较快,使得文本与文本间的运算有了可能。 第二个重要节点:Transformer和bert 为预训练语言模型发…

【ABB】原点设定

【ABB】原点设定 操作流程演示 操作流程 操作轴回原点编辑电机校准偏移更新转速计数器 1.首先得了解机器手的轴,这里以6轴作参考。 注意先回456轴,后回123轴。 2.然后需要了解机器人关节运动模式,即选择如下两个模式。 3.注意机器人各轴移动…

QT的编译过程(底层逻辑)

qmake -project 用于从源代码生成项目文件,qmake 用于从项目文件生成 Makefile,而 make 用于根据 Makefile 构建项目。 详细解释: qmake -project 这个命令用于从源代码目录生成一个初始的 Qt 项目文件(.pro 文件)。它…

吃顿饭的时间,用AI开发一个应用官网

最早接触开发时做的第一个项目就是企业官网,到后来自己开始走上独立开发者的道路时,哪怕是开发面向消费者的移动端产品,在产品上架时也需要提供应用官网。 感觉,编程这件事情和官网开发,紧密相连。 过往为了追求开发效…

个人微信 微信营销系统

个人微信 微信营销系统 CRM系统

Windows 玩转大模型第一天:大模型本地部署,调用大模型API可直接工程化应用(全部代码和详细部署流程)

Ollama 是一个开源框架,专为在本地机器上便捷部署和运行大型语言模型(LLM)而设计。 以下是其主要特点和功能概述: 1. 简化部署:Ollama 目标在于简化在 Docker 容器中部署大型语言模型的过程,使得非专业用…

ELK日志系统和Filebeat采集器的学习总结

ELK是ElasticSerach、Logstash、Kina Logstash负责采集数据,Logstash有三个插件,input、filter、output,filter插件作用是对采集的数据进行处理,过滤的,因此filter插件可以选,可以不用配置。 ElasticSear…

vulnhub靶场之DC-1

1 信息收集 1.1 主机发现 arp-scan -l 主机ip地址为:192.168.1.4 1.2 端口服务扫描 nmap -sS -sV -A -T5 -p- 192.168.1.4 开发22,80,111端口 1.3 目录扫描 dirsearch -u 192.168.1.4 2 渗透测试 2.1 先访问一下80端口 发现是一个…

K8S 部署 EFK

安装说明 系统版本为 Centos7.9 内核版本为 6.3.5-1.el7 K8S版本为 v1.26.14 ES官网 开始安装 本次安装使用官方ECK方式部署 EFK,部署的是当前的最新版本。 在 Kubernetes 集群中部署 ECK 安装自定义资源 如果能打开这个网址的话直接用这个命令安装,打不开的话…

半导体制造企业 文件共享存储应用

用户背景:半导体设备(上海)股份有限公司是一家以中国为基地、面向全球的微观加工高端设备公司,为集成电路和泛半导体行业提供具竞争力的高端设备和高质量的服务。 挑战:芯片的行业在国内迅猛发展,用户在上海…

科研绘图系列:R语言STAMP图(STAMP Plot)

介绍 STAMP图(STAMP plot)并非一个广泛认知的、具有特定名称的图表类型,而是可能指在STAMP(Statistical Analysis of Metagenomic Profiles:“STAMP: statistical analysis of taxonomic and functional profiles”)软件使用过程中生成的各种统计和可视化图表的总称。ST…

Ubuntu 24.04 上安装 Kubernetes,超级详细的教程!

Kubernetes 是一个免费的开源容器编排工具,它允许基于容器的应用程序的自动化部署、扩展和管理。 我们将介绍如何使用 Kubeadm 逐步在 Ubuntu 24.04 上安装 Kubernetes 此次演示中,我们将使用以下三个 Ubuntu 24.04 实例 Instance 1 : Master Node (k…