【React】Vite 构建 React

devtools/2024/9/19 11:01:14/ 标签: react.js, 前端, 前端框架

项目搭建

vite 官网:Vite

跟着文档走即可,选择 react ,然后 ts + swc。

着重说一下 package-lock.json 这个文件有两个作用:

  • 锁版本号(保证项目在不同人手里安装的依赖都是相同的,解决版本冲突的问题)
  • 缓存(依赖的名字 + version + resolved ==> 生成一个 hash 值,然后这个 hash 值会与 integrity 的 hash 比较,相同的话直接使用目录中的 node_modules 包,不需要额外的下载 )

还有就是 package.json 中的 private 设置为 true,可以保证我们不会错误的将自己的项目发布到 npm 官网上。

src/vite-env.d.ts 中的三斜线指令用于引入类型声明,比如各种预处理器,各种文件后缀的类型等。

createRoot(document.getElementById('root')!).render(<StrictMode><App /></StrictMode>,
)

这里使用的 ! 是非空断言,用于“欺骗”编译器我们的变量不为空,减少不必要的 ts 类型校验。

public目录的资源编译之后会存放到根目录,而静态资源assets是会随着项目一起打包的,public则不会被编译。

当我们 dev 编译项目后,public 中的文件会被放到项目的根目录下,这就是为什么我们可以直接在项目中路径中访问,也可以直接进行 ajax 发送请求获取。所以,public 下的文件 不会被编译,而 assets 下的文件会被编译。


http://www.ppmy.cn/devtools/111498.html

相关文章

利用TCP编程实现FTP功能

模拟FTP核心原理&#xff1a;客户端连接服务器后&#xff0c;向服务器发送一个文件。文件名可以通过参数指定&#xff0c;服务器端接收客户端传来的文件&#xff08;文件名随意&#xff09;&#xff0c;如果文件不存在自动创建文件&#xff0c;如果文件存在&#xff0c;那么清空…

【系统架构设计师】单例模式(Singleton Pattern)

单例模式详解 1. 什么是单例模式? 单例模式(Singleton Pattern)是一种创建型设计模式,它的目的是确保一个类只有一个实例,并且为整个系统提供一个全局访问点。换句话说,单例模式会限制类的实例化次数,使得在整个应用程序运行期间,类只有一个对象实例。无论何时何地访…

基于 SpringBoot摄影跟拍预定管理系统

专业团队&#xff0c;咨询送免费开题报告&#xff0c;大家可以来留言。 摘要 首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上…

如何在Oracle中实现数据的加密

在Oracle数据库中实现数据加密是一项重要的安全措施&#xff0c;它可以保护存储在数据库中的敏感信息不被未授权访问。Oracle提供了多种数据加密方法&#xff0c;包括透明数据加密&#xff08;TDE&#xff09;、列级加密和使用内置加密函数等。以下是一些在Oracle中实现数据加密…

【RabbitMQ】RabbitMQ如何保证数据的可靠性,RabbitMQ如何保证数据不丢失,数据存储

【RabbitMQ】RabbitMQ如何保证数据的可靠性&#xff0c;RabbitMQ如何保证数据不丢失&#xff0c;数据存储 RabbitMQ通过一系列机制来确保数据&#xff08;即消息&#xff09;在传输和处理过程中不丢失。这些机制主要包括以下几个方面&#xff1a; 1. 消息持久化 持久化消息&a…

Apache Pulsar 与 Kafka Streams

Apache Pulsar 与 Kafka Streams 的比较与应用 Apache Pulsar 和 Kafka Streams 是两种广泛使用的数据流处理和消息队列技术。它们在构建实时数据流处理系统时发挥着重要作用&#xff0c;尽管两者的定位和用途略有不同。Apache Pulsar 是一个分布式的消息流平台&#xff0c;类…

JAMA network open|自动化定量评估胃肠道肿瘤中三级淋巴结构的机器学习模型|文献精析·24-09-07

小罗碎碎念 这篇文章报道了一种基于机器学习模型的自动化方法&#xff0c;用于在常规组织病理学图像中检测和分类胃肠道癌症中的三级淋巴结构&#xff0c;并验证了其与患者生存预后的关联。 在这项多中心诊断/预后研究中&#xff0c;开发了一种基于机器学习的计算工具&#xff…

动手学深度学习8.4. 循环神经网络-笔记练习(PyTorch)

本节课程地址&#xff1a;54 循环神经网络 RNN【动手学深度学习v2】_哔哩哔哩_bilibili 本节教材地址&#xff1a;8.4. 循环神经网络 — 动手学深度学习 2.0.0 documentation (d2l.ai) 本节开源代码&#xff1a;...>d2l-zh>pytorch>chapter_multilayer-perceptrons&…

go 语言常见问题(4)

31. go语言编程的好处是什么 编译和运行都很快。在语言层级支持并行操作。有垃圾处理器。内置字符串和 maps。函数是 go 语言的最基本编程单位。 32. 说说go语言的select机制 select 机制用来处理异步 IO 问题select 机制最大的一条限制就是每个 case 语句里必须是一个 IO 操…

Linux学习-Docker文件系统

Overlayfs Overlayfs 是一种类似 aufs 的一种堆叠文件系统&#xff0c;于 2014 年正式合入 Linux-3.18 主线内核&#xff0c;目前其功能已经基本稳定&#xff08;虽然还存在一些特性尚未实现&#xff09;且被逐渐推广。 Overlayfs 是一种堆叠文件系统&#xff0c;它依赖并建立…

芝法酱学习笔记(0.1)——Ubuntu下,Java开发环境的基本搭建

一、本章目标 书接上回&#xff0c;服务器已经安装完成&#xff0c;下面我们需要安装基本的开发环境。本次学习打算以Java后端开发为中心进行拓展&#xff0c;目前先安装Java开发、部署必备的一些软件。 基础部分 gcc gcc是c的编译软件&#xff0c;一些软件的安装包需要源码…

CORS跨域详解

目录 前言 快速说明 详细解释 Access-Control-Allow-Origin Access-Control-Allow-Credentials Access-Control-Allow-Headers Access-Control-Expose-Headers Access-Control-Allow-Methods Access-Control-Max-Age 前言 假设你已经了解服务端处理CORS跨域问题时,会…

Flink快速上手

Flink快速上手 批处理Maven配置pom文件java编写wordcount代码 有界流处理无界流处理 批处理 Maven配置pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://ww…

数据结构(6)哈希表和算法

一、哈希表 哈希表的基本概念 哈希函数&#xff1a; 哈希函数是将输入&#xff08;键&#xff09;转换为固定大小的输出&#xff08;哈希值&#xff09;的函数。这个输出通常是一个整数&#xff0c;表示在哈希表中的索引位置。理想的哈希函数应该能够均匀分布输入&#xff0c;…

华普微特殊“射频芯片”-隔离芯片品质卓越

HOPERF隔离器技术含量“超标”&#xff01; 作为信号链芯片中的重要一环&#xff0c;隔离芯片的主要作用就是在电力配电系统、工业自动化、医疗设备、可再生能源系统以及通信与数据传输等存在弱电控制强电的场景中实现电气隔离、信号传输与安全防护。 在弱电控制强电的过程中…

SprinBoot+Vue民宿预约微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

springboot 的共享session方案?

问&#xff1a;springboot 的共享session方案&#xff1f; 参考&#xff1a; https://juejin.cn/post/7195227930077691963分布式之session共享问题 4种解决方案及spring session的使用_分布式session共享方案-CSDN博客 什么是 Session &#xff1f; 答&#xff1a;因为Http协…

基于开源WQ装备数据的知识图谱全流程构建

随着大数据和人工智能技术的快速发展&#xff0c;构建领域特定的知识图谱已成为信息管理和决策支持的重要手段。武器装备知识图谱不仅能够对复杂的武器系统进行结构化展示&#xff0c;还可以通过关系推理揭示武器与装备之间的潜在联系。 1、技术路线 本文将详细介绍如何基于开…

数据库系列之GaussDB数据库中逻辑对象关系简析

初次接触openGauss或GaussDB数据库的逻辑对象&#xff0c;被其中的表空间、数据库、schema和用户之间的关系&#xff0c;以及授权管理困惑住了&#xff0c;与熟悉的MySQL数据库的逻辑对象又有明显的不同。本文旨在简要梳理下GaussDB数据库逻辑对象之间的关系&#xff0c;以加深…

python 函数 封装

封装 函数的参数是&#xff1a;变量 def 函数(参数):print(参数)if __name__ __main__:函数(参数)函数(参数2)函数的参数是&#xff1a; 字典 import requests# 定义一个字典 data {} 地址 "https://webdriveruniversity.com/" 请求方法 getdata["url"…