GraphQL基础知识与Spring for GraphQL使用教程

文章目录

    • 1、数据类型
      • 1.1、标量类型
      • 1.2. 高级数据类型
    • 基本操作
    • 2、Spring for GraphQL实例
      • 2.1、项目目录
      • 2.2、数据库表
      • 2.3、GraphQL的schema.graphql
      • 2.4、Java代码
    • 3、运行效果
      • 3.1、添加用户
      • 3.2、添加日志
      • 3.3、查询所有日志
      • 3.4、查询指定用户日志
      • 3.5、数据订阅
    • 4、总结

GraphQL是一种用于API开发的查询语言和运行时环境。它由Facebook开发并于2015年开源。GraphQL的主要目标是提供一种更高效、灵活和易于使用的方式来获取和操作数据。与传统的RESTful API相比,GraphQL允许客户端精确地指定需要的数据,并减少了不必要的网络传输和数据处理。
采用GraphQL,甚至不需要有任何的接口文档,在定义了Schema之后,服务端实现Schema,客户端可以查看Schema,然后构建出自己需要的查询请求来获得自己需要的数据。

1、数据类型

1.1、标量类型

  1. Int -32位整型数字;
  2. Float-双精度浮点型;
  3. String-UTF‐8 字符序列;
  4. Boolean-布尔型,true 或者 false;
  5. ID-标识类型,唯一标识符,注意此ID为字符,如果使用Mysql自增长id,也会自动转为对应的字符串;

1.2. 高级数据类型

  1. Object - 对象,用于描述层级或者树形数据结构。Object类型有一个类型名,以及类型包含的字段。
type Product {id: ID!info: String!price: Float
}

在此示例中,声明了Product对象类型,定义了3 个字段:
id:非空 ID 类型。
info:非空字符串类型。
price:浮点型。

  1. Interface-接口,用于描述多个类型的通用字;与 Object一样。
interface Product {id: ID!info: String!price: Float
}
  1. Union-联合类型,用于描述某个字段能够支持的所有返回类型以及具体请求真正的返回类型;
  2. Enum-枚举,用于表示可枚举数据结构的类型;
enum Status {YesNo
}
type Product {id: ID!info: String!price: Floatstat: Status
}
  1. Input-输入类型input本质上也是一个type类型,是作为Mutation接口的输入参数。换言之,想要定义一个修改接口(add,update,delete)的输入参数对象,就必须定义一个input输入类型。
input BookInput {isbn: ID!title: String!pages: IntauthorIdCardNo: String
}
  1. List -列表,任何用方括号 ([]) 括起来的类型都会成为 List 类型。
type Product {id: ID!info: Stringprice: Floatimages: [String]
}
  1. Non-Null-不能为 Null,类型后边加!表示非空类型。例如,String 是一个可为空的字符串,而String!是必需的字符串。

基本操作

  • Query(只读操作)
#schema.graphqls定义操作
type Query {allBooks: [Book]!bookByIsbn(isbn: ID): Book
}# 接口查询语法
query{allBooks {titleauthor {nameage}}
}
  • Mutation(可写操作)
#schema.graphqls定义操作
type Mutation {createBook(bookInput: BookInput): BookcreateAuthor(authorInput: AuthorInput): Author
}# mutation{
#   createAuthor(authorInput:{ 
#     idCardNo: "341234567891234567",
#     name:"test1",
#     age:38
#   }
#   ){
#     name 
#     age
#   }
# }
  • Subscription(订阅操作)
type Subscription {greetings: String
}

2、Spring for GraphQL实例

GraphQL只是一种架构设计,具体的实现需要各个技术平台自己实现,目前主流的开发语言基本都已经有现成的类库可以使用,GraphQL Java就是Java平台的实现。
GraphQL Java虽然实现了GraphQL,但是只是一个执行GraphQL请求的引擎,用户在使用中需要创建自己的HTTP服务来提供服务。

Spring for GraphQL为基于GraphQL Java构建的Spring应用程序提供支持,来自 GraphQL Java 团队,它的目标是成为所有Spring、GraphQL应用程序的基础。

spring-graphql中定义的核心注解如下:

  • @GraphQlController:申明该类是GraphQL应用中的控制器
  • @QueryMapping:申明该类或方法使用GraphQL的query操作,等同于@SchemaMapping(typeName = “Query”),类似于@GetMapping
  • @Argument:申明该参数是GraphQL应用的入参
  • @MutationMapping:申明该类或方法使用GraphQL的mutation操作,等同于@SchemaMapping(typeName = “Mutation”)
  • @SubscriptionMapping:申明该类或方法使用GraphQL的subscription操作,等同于@SchemaMapping(typeName = “Subscription”)
  • @SchemaMapping:指定GraphQL操作类型的注解,类似@RequestMapping

2.1、项目目录

项目代码目录
在这里插入图片描述

2.2、数据库表

数据表结构,这里例子简单用了用户表和用户日志表

CREATE TABLE `admin_user` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4CREATE TABLE `admin_log` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`user_id` varchar(255) DEFAULT NULL,`visit_url` varchar(255) DEFAULT NULL,`create_date` datetime DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4

2.3、GraphQL的schema.graphql

GraphQL对应的schema.graphql定义文件,注意GraphQL默认只支持标量类型,DateTime自定义类型使用graphql-java-extended-scalars:https://github.com/graphql-java/graphql-java-extended-scalars提供

scalar DateTimetype AdminUser{id: ID!name: String!
}type AdminLog{id: ID!visitUrl: Stringuser: AdminUser!createDate: DateTime
}type Query {allLogs:[AdminLog]logByUser(userid: ID): [AdminLog]
}type Mutation {createUser(adminUserInput: AdminUserInput): AdminUsercreateLog(adminLogInput: AdminLogInput): AdminLog
}input AdminLogInput {userId: String!visitUrl: StringcreateDate: DateTime
}input AdminUserInput {name: String!
}type Subscription {greetings: String
}

2.4、Java代码

pom.xml依赖包文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.0.10</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.penngo.example</groupId><artifactId>graphql-app</artifactId><version>0.0.1-SNAPSHOT</version><name>graphql-app</name><description>graphql-app project for Spring Boot</description><properties><java.version>17</java.version><maven.compiler.source>17</maven.compiler.source><maven.compiler.target>17</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-graphql</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.23</version></dependency><!-- https://mvnrepository.com/artifact/com.graphql-java/graphql-java-extended-scalars --><dependency><groupId>com.graphql-java</groupId><artifactId>graphql-java-extended-scalars</artifactId><version>19.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><excludes><exclude><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></exclude></excludes></configuration></plugin></plugins></build><repositories><repository><id>alimaven</id><name>Maven Aliyun Mirror</name><url>https://maven.aliyun.com/repository/central</url></repository></repositories><pluginRepositories><pluginRepository><id>aliyun-plugin</id><url>https://maven.aliyun.com/repository/public</url><releases><enabled>true</enabled></releases><snapshots><enabled>false</enabled></snapshots></pluginRepository></pluginRepositories></project>

对应的数据库实体类

package com.penngo.example.entity;import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.time.OffsetDateTime;@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
public class AdminLog {@Id@GeneratedValue(strategy= GenerationType.IDENTITY)private Long id;private String userId;private String visitUrl;private OffsetDateTime createDate;
}package com.penngo.example.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
public class AdminUser {@Id@GeneratedValue(strategy= GenerationType.IDENTITY)private Long id;private String name;
}

GraphQL对应的输入类

package com.penngo.example.entity;
import lombok.Data;
import java.time.OffsetDateTime;
@Data
public class AdminLogInput {private String userId;private String visitUrl;private OffsetDateTime createDate;}package com.penngo.example.entity;
import lombok.Data;
@Data
public class AdminUserInput {private String name;
}

对应的数据库操作类

package com.penngo.example.repository;
import com.penngo.example.entity.AdminUser;
import org.springframework.data.jpa.repository.JpaRepository;
public interface AdminUserRepository  extends JpaRepository<AdminUser,Long> {AdminUser findById(String userId);
}package com.penngo.example.repository;
import com.penngo.example.entity.AdminLog;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;public interface AdminLogRepository  extends JpaRepository<AdminLog,Long> {List<AdminLog> findAllByUserId(String userId);
}

对外服务接口类

package com.penngo.example.controller;
import com.penngo.example.entity.*;
import com.penngo.example.repository.AdminLogRepository;
import com.penngo.example.repository.AdminUserRepository;
import org.springframework.beans.BeanUtils;
import org.springframework.graphql.data.method.annotation.Argument;
import org.springframework.graphql.data.method.annotation.MutationMapping;
import org.springframework.graphql.data.method.annotation.QueryMapping;
import org.springframework.graphql.data.method.annotation.SchemaMapping;
import org.springframework.stereotype.Controller;
import java.util.List;@Controller
public class AdminLogController {private final AdminUserRepository adminUserRepository;private final AdminLogRepository adminLogRepository;public AdminLogController(AdminUserRepository adminUserRepository, AdminLogRepository adminLogRepository){this.adminLogRepository = adminLogRepository;this.adminUserRepository = adminUserRepository;}@QueryMappingpublic List<AdminLog> allLogs(){List<AdminLog> logsList = adminLogRepository.findAll();return logsList;}@QueryMappingpublic List<AdminLog> logByUser(@Argument String userid){return adminLogRepository.findAllByUserId(userid);}@SchemaMapping(typeName = "AdminLog" ,field = "user")public AdminUser getAuthor(AdminLog adminLog){AdminUser adminUser = adminUserRepository.findById(adminLog.getUserId());return adminUser;}@MutationMappingpublic AdminLog createLog(@Argument AdminLogInput adminLogInput){AdminLog log = new AdminLog();BeanUtils.copyProperties(adminLogInput,log);return adminLogRepository.save(log);}
}package com.penngo.example.controller;
import com.penngo.example.entity.*;
import com.penngo.example.repository.AdminLogRepository;
import com.penngo.example.repository.AdminUserRepository;
import org.springframework.beans.BeanUtils;
import org.springframework.graphql.data.method.annotation.Argument;
import org.springframework.graphql.data.method.annotation.MutationMapping;
import org.springframework.graphql.data.method.annotation.QueryMapping;
import org.springframework.stereotype.Controller;
import java.util.List;@Controller
public class AdminUserController {private final AdminUserRepository adminUserRepository;private final AdminLogRepository adminLogRepository;public AdminUserController(AdminUserRepository adminUserRepository, AdminLogRepository adminLogRepository){this.adminLogRepository = adminLogRepository;this.adminUserRepository = adminUserRepository;}@QueryMappingpublic List<AdminLog> userById(@Argument String userid){return adminLogRepository.findAllByUserId(userid);}@MutationMappingpublic AdminUser createUser(@Argument AdminUserInput adminUserInput){AdminUser user = new AdminUser();BeanUtils.copyProperties(adminUserInput,user);return adminUserRepository.save(user);}
}package com.penngo.example.controller;
import com.penngo.example.entity.AdminLog;
import com.penngo.example.repository.AdminLogRepository;
import com.penngo.example.repository.AdminUserRepository;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.graphql.data.method.annotation.SubscriptionMapping;
import org.springframework.stereotype.Controller;
import reactor.core.publisher.Flux;
import java.time.Duration;@Controller
public class GreetingController {private final AdminUserRepository adminUserRepository;private final AdminLogRepository adminLogRepository;public GreetingController(AdminUserRepository adminUserRepository, AdminLogRepository adminLogRepository){this.adminLogRepository = adminLogRepository;this.adminUserRepository = adminUserRepository;}// 数据订阅,取最新的5条数据,每5秒发送一条给客户端,一共5次@SubscriptionMappingpublic Flux<AdminLog> greetings(){System.out.println("greetings====================");Page<AdminLog> logsList = adminLogRepository.findAll(PageRequest.of(0,5).withSort(Sort.Direction.DESC, "id"));return Flux.fromStream(logsList.stream()).delayElements(Duration.ofSeconds(5)).take(5);}
}

自定义日期数据类型DateTime

package com.penngo.example.component;
import graphql.scalars.ExtendedScalars;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.graphql.execution.RuntimeWiringConfigurer;@Configuration
public class CustomScalarType {@Beanpublic RuntimeWiringConfigurer runtimeWiringConfigurer() {return wiringBuilder -> wiringBuilder.scalar(ExtendedScalars.DateTime);}
}

服务启动类

package com.penngo.example;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class GraphqlAppApplication {public static void main(String[] args) {SpringApplication.run(GraphqlAppApplication.class, args);}
}

3、运行效果

3.1、添加用户

添加用户

mutation{ createUser(adminUserInput: { name: "test1", } ) { id name } }

在这里插入图片描述

3.2、添加日志

添加日志

mutation{createLog(adminLogInput: {userId: "1",visitUrl: "http://localhost:8080/method1"createDate: "2023-09-17T19:39:57+08:00"} ){idvisitUrlcreateDate} }  

在这里插入图片描述

3.3、查询所有日志

查询所有日志

query{allLogs{idvisitUrluser{idname}createDate}
}

在这里插入图片描述

3.4、查询指定用户日志

查询指定用户日志

query{logByUser(userid:"1") {idvisitUrluser{idname}createDate}
}

在这里插入图片描述

3.5、数据订阅

数据订阅,订阅需要有websocket的支持。

subscription {greetings
}

在这里插入图片描述
在这里插入图片描述

4、总结

使用Spring for GraphQL试用了GraphQL后,它实现按需取数据的功能。服务器开发人员和前端开发人员可以通过schema.graphqls定义文件,协定好接口和数据,省掉写接口文档的工作。
缺点可能就是需要一点学习成本,虽然提供数据嵌套可以通过一个请求获取所有数据,但是嵌套复杂可能引起性能问题。

Spring for GraphQL官方参考:https://docs.spring.io/spring-graphql/docs/current/reference/html/#overview

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

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

相关文章

C 语言简单入门

C 语言发展历史|标准 1972年&#xff0c;丹尼斯里奇&#xff08;Dennis Ritch&#xff09;和肯汤普逊&#xff08;Ken Tompson&#xff09;在贝尔实验室开发 UNIX 操作系统时基于 B 语言设计出 C 语言。 1987年&#xff0c;布莱恩柯林汉&#xff08;Brian Kernighan&#xff…

数据库基础理论

什么是数据库&#xff1f; 数据&#xff1a;描述事物的符号记录&#xff0c;可以是数字、文字、图形、图像、声音、语言等&#xff0c;数据有多种形式&#xff0c;他们都是可以经过数字化后存入计算机。 数据库&#xff1a;存储数据的仓库&#xff0c;是长期存放在计算机内、…

世界前沿技术发展报告2023《世界信息技术发展报告》(三)量子信息技术

&#xff08;三&#xff09;量子信息技术 1. 概述2. 量子计算2.1 阿里巴巴达摩院成功研制两比特量子芯片&#xff0c;单比特操控精度超99.97%2.2 加拿大Xanadu公司开发出可编程光量子计算机2.3 美国英伟达公司为经典-量子混合计算推出开发架构2.4 日本国家自然科学研究所开发出…

SpringBoot实战

ISBN: 978-7-115-43314-5 作者&#xff1a;【美】Craig Walls 译者&#xff1a;丁雪丰 页数&#xff1a;209页 阅读时间&#xff1a;2022-12-27 推荐指数&#xff1a;★★★☆☆ 阅读本书还是要有一定的基础的&#xff0c;如果想要入门级还是不行&#xff0c; 建议入门级可以看…

python+nodejs+php+springboot+vue 法律知识分享科普系统平台

在设计过程中&#xff0c;充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 要想实现法律知…

数字图像基础,数字图像处理中的基础内容(数字图像处理概念 P2)

文章目录 人类视觉系统构造数字图像生成采样和量化像素之间的基本关系 人类视觉系统构造 锥状体&#xff1a;明亮的视野杆状体&#xff1a;微光或暗视野图像成像原理&#xff1a;类似照相机亮度适应现象&#xff1a;人的视觉不能同时在一个范围内工作同时对比现象&#xff1a;…

el-select的某一项选中后显示id

环境: vue3element-plus 今天在使用elementui的下拉组件的时候发现有一个选项在选中后显示的是id.找了会没看到问题,后来想到会不会是没有设置key的原因(之前看到说vue3可以不用设置key),果然加上key就可以了

变量、因子、缺失值、类型转换、剔除多余变量、随机抽样、用R使用SQL、trim、na.rm=TRUE、数据标准化应用

变量&#xff1a;名义型、有序型、连续型变量 名义型&#xff1a;普通事件类型&#xff0c;如糖尿病I型和糖尿病II型。 有序型&#xff1a;有顺序的事件类型&#xff0c;如一年级、二年级和三年级。 连续型&#xff1a;表示有顺序的数量&#xff0c;如年龄。 因子&#xff1a;…

基于Python+Django的热门旅游景点数据分析系统的设计与实现(源码+lw+部署文档+讲解等)

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

C++项目:仿muduo库实现高性能高并发服务器

文章目录 一、实现目标二、前置知识&#xff08;一&#xff09;HTTP服务器1.概念 &#xff08;二&#xff09;Reactor模型&#xff1a;1.概念2.分类&#xff08;1&#xff09;单Reactor单线程&#xff1a;单I/O多路复用业务处理。&#xff08;2&#xff09;单Reactor多线程&…

ultraEdit正则匹配多行(xml用)

在ultraEdit中&#xff0c;我想选取<channel到</channel>之间的多行&#xff08;进行删除&#xff09;。在perl模式下&#xff0c;命令为“<channel[\s\S]?</channel>”。下面是xml文件&#xff1a; <!--This XML file does not appear to have any sty…

在北京多有钱能称为富

背景 首先声明&#xff0c;此讨论仅限个人的观点&#xff0c;因为我本身不富嘛&#xff0c;所以想法应该非常局限。 举个栗子 富二代问我朋友&#xff0c;100~1000w之间&#xff0c;推荐一款车&#xff1f; 一开始听到这个问题的时候&#xff0c;有被唬住&#xff0c;觉得预…

Linux知识

文章目录 一、Apt1、查看操作系统信息2、换源3、比较4、用法5、ubuntu获取源码 二、pkg-config三、调试glibc四、问题 一、Apt 1、查看操作系统信息 使用以下命令查看本机的操作系统和位数信息&#xff1a; uname -m && cat /etc/*release输出&#xff1a; x86_64 D…

多线程带来的的风险-线程安全

多线程带来的的风险-线程安全 ~~ 多线程编程中,最难的地方,也是一个最重要的地方&#xff0c;还是一个最容易出错的地方,更是一个面试中特别爱考的地方.❤️❤️❤️ 线程安全的概念 万恶之源,罪魁祸首是多线程的抢占式执行,带来的随机性.~~&#x1f615;&#x1f615;&…

API(十)时间相关的SDK

一 时间相关的SDK ① 时间记录的必要性 1、案发现场的时间点2、通过时间判断性能3、时间的不准确性,日志落盘时间 --> 缓冲区导致延迟 ② 使用哪些日期和时间的函数 1、lua 标准时间函数,函数 os.time、os.date 和 os.difftime 提供了所有日期和时间2、在 openresty…

windows 深度学习环境部署

1. 根据显卡配置安装适合的CUDA,查看显卡配置可在显卡控制面板上查看,安装是否成功可通过nvidia-smi查看&#xff1b;注意安装路径 https://developer.nvidia.com/cuda-toolkit-archive 2. 根据cuda安装合适的cudnn&#xff0c;需要注册NVIDIA cuDNN Archive | NVIDIA Devel…

自定义数据类型

前言&#xff1a;小伙伴们又见面啦&#xff0c;今天这篇文章&#xff0c;我们来谈谈几种自定义数据类型。 目录 一.都有哪些自定义数据类型 二.结构体 结构体内存对齐 1.如何对齐 2.为什么要对齐 3.节省空间和提升效率的方法 &#xff08;1&#xff09;让占用空间小的成员…

Qt5开发及实例V2.0-第二十三章-Qt-多功能文档查看器实例

Qt5开发及实例V2.0-第二十三章-Qt-多功能文档查看器实例 第23章 多功能文档查看器实例23.1. 简介23.2. 界面与程序框架设计23.2.1. 图片资源23.2.2. 网页资源23.2.3. 测试用文件 23.3 主程序代码框架23.4 浏览网页功能实现23.4.1 实现HtmIHandler处理器 23.5. 部分代码实现23.5…

AI 编码助手 Codewhisperer 安装步骤和使用初体验

文章作者&#xff1a;为了自己加油 最近亚⻢逊云科技推出了一款基于机器学习的AI编程助手 Amazon Code Whisperer&#xff0c;可以实时提供代码建议。在编写代码时&#xff0c;它会自动根据现有的代码和注释给出建议。Amazon Code Whisperer与 GitHub Copilot 类似&#xff0c;…

Vite的安装与使用

Vite也是前端的构建工具&#xff0c;相较于Webpack&#xff0c;Vite使用了不同的运行方式&#xff1a; 开发时并不对项目进行打包&#xff0c;而是直接采用ESM的方式来运行项目。在项目部署时再进行打包。 因此vite的执行速度相较于Webpack快了许多&#xff0c;操作起来也比W…