vite依赖预构建与配置文件

vite的预加载

import _ from 'lodash'

vite 在处理过程中会把非绝对路径或者相对路径的引用,会尝试进行路径补全操作。

import _ from 'lodash'// vite 会处理成import _ from '/node_modlues/.vite/lodash'

依赖预构建

首先vite会找到对应的依赖,然后调用esbuild(对js语法进行处理的一个库),将其它规范代码转换成esmodule代码,然后放到当前目录下的node_modlues/.vite/deps

这样做,解决了三个问题:

  1. 不同的第三方包有不同的导出格式,但vite依赖预构建都给转换成esmodule规范
  2. 包都导入到了/node_modules/.vite/deps目录下,方便路径重写
  3. 解决网络多包传输的性能问题,依赖预构建会尽可能的把额外的export和import,最后只生成一个或者几个模块

vite 配置

建议建立vite.base.config.js 基础配置,vite.dev.config.js 开发环境配置,vite.prod.config.js 生产环境配置 vite.config.js 项目配置入口。如下:

  1. vite.config.js
import { defineConfig } from "vite";import baseConfig from "./vite.base.config";
import devConfig from "./vite.dev.config";
import prodConfig from "./vite.prod.config";// 尽量不要写if else 这种语句
const envConfig = {// 生产环境配置build: () => {console.log("生产环境");return { ...baseConfig, ...prodConfig };},// 开发环境配置serve: () => {console.log("开发环境");return { ...baseConfig, ...devConfig };},
};export default defineConfig(({ command }) => {console.log("command", command);return envConfig[command]();
});
  1. vite.base.config.js
import { defineConfig } from "vite";export default defineConfig({});
  1. vite.dev.config.js
import { defineConfig } from "vite";export default defineConfig({});
  1. vite.prod.config.js
import { defineConfig } from "vite";export default defineConfig({});

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

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

相关文章

call、apply、bind 作用和区别

目录 一、用法 1.1、call用法 1.2、apply用法 1.3、bind用法 二、区别 2.1、相同点 2.2、不同点 三、使用场景 3.1 apply()的使用合并两个数组 3.1.1 原理 3.1.2 如何解决参数过多的问题呢?—— 将参数数组切块,循环传入目标方法 3.2 app…

【C++风云录】探索食品工艺的新工具:创新你的食谱

食品加工模拟:优化你的营养研究 前言 在科技的推动下,食品科学领域已经逐步引入了智能化工具,以协助研究人员和工业界进行更精细、更深入的研究。本文将详细介绍六款与食品科学紧密相关的软件和库,它们包括FoodCAD, Nutritional…

数据结构十三:八大排序算法

排序算法(sorting algorithm)是用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用,因为有序数据通常能够被更高效地查找、分析和处理。排序算法中的数据类型可以是整数、浮点数、字符或字符串等。排序的判断规则可根据需求设定&am…

树(Tree)和二叉树

1.树的定义 树是一种非线性的数据结构,它表现的关系是一对多 它是由n(n>0)个结点组成的有限集,当n 0时,称为空树。 在任意一棵非空树中应满足: 1.有且仅有一个特殊的根节点,根节点没有前…

【江科大STM32学习笔记】GPIO输出

一、GPIO简介 1.GPIO(General Purpose Input/Output)通用输入输出 2.可配置为8种输入输出模式 3.引脚电平:0V~3.3V,部分引脚可容忍5V 部分引脚输入可为5V但输出只能是3.3V 4.输出模式下可控制端口输出高低电平,用…

Python基础详解四

一,Json解析 字典转换为JSON: import jsondata [{"name":"袁震","age":20},{"name":"张三","age":21},{"name":"李四","age":22}] str json.dumps(data) …

Linux(centos7)系统配置 ntpd服务设置时间同步

一 、应用场景 两台服务器,要求使他们时间同步,有人问为什么要时间同步?如果一个集群中,时间相差很大,那么会出现很多诡异的问题,你也不想在一个无法解决的问题上浪费几天时间吧!总之,设置服务器之间时间同步,为了避免很多问题的发生! ntpd(Network Time Protocol …

【第20章】spring-mvc之定时任务

文章目录 前言一、开启1. 打开开关2. 定时任务类3. 执行结果 二、定时任务线程池1.定义线程池2.开启异步3. 定时任务类4. 执行结果 三、cron总结 前言 定时任务是项目中比较常见的功能,常用于定时发送消息、拉取数据、数据备份等; 为什么要放到SpringM…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (四)

基于 LlaMA 3 LangGraph 在windows本地部署大模型 (四) 大家继续看 https://lilianweng.github.io/posts/2023-06-23-agent/的文档内容 第三部分:工具使用 工具的使用是人类的一个显着而显着的特征。我们创造、修改和利用外部物体来完成超…

开发一款抓大鹅游戏

你抓大鹅第二关过了吗?近期,经常在身边听见这样的疑问。作为本月的爆款游戏,抓大鹅以简单的消消乐玩法、动感的音乐、易上手的操作方式、简单易懂的游戏规则吸引了大量玩家。就像2022年的羊了个羊,2021年的合成大西瓜,但它们确实非…

20240511,谓词,内建函数对象

拜托铠甲勇士真的帅好不好!!! STL案例2-员工分组 10个员工,指派部门,员工信息(姓名,工资组成,部门:策划,美术,研发),随机…

【gpedit.msc】组策略编辑器的安装,针对windows家庭版,没有此功能

创建一个记事本文件然后放入以下内容 echo offpushd "%~dp0"dir /b %systemroot%\Windows\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >gp.txtdir /b %systemroot%\servicing\Packages\Microsoft-Windows-GroupPolicy-…

[框架] Unity 公共执行器

本篇我们通过使用单例模式来创建一个公共执行器,使得原本应该在Update()、FixedUpdate()中的指令都可以统一放在一个对象中执行,且可进行添加和移除操作。 1. 创建单例模式改造器:SingletonMono 我们先创建一个单例模式改造器,使…

2024数维杯

截至我所知的信息(2023年),“数维杯”并不是一个广泛认知的赛事名称,至少在主流的学术、教育或科技竞赛领域中没有明确对应的赛事。这可能是指某个特定领域或地区的竞赛,也可能是一个新兴的比赛或者非正式的称谓。 如…

SSM【Spring SpringMVC Mybatis】——Mybatis

目录 1、初识Mybatis 1.1Mybatis简介 1.2 官网地址 2、搭建Mybatis框架 2.1 准备 2.2 搭建Mybatis框架步骤 1. 导入jar包 2. 编写核心配置文件【mybatis-config.xml】 3. 书写相关接口及映射文件 4. 测试【SqlSession】 2.3 添加Log4j日志框架 导入jar包 编写配置文…

ERA5数据的区别

ERA5 hourly data on single levels from 1940 to present 链接 ERA5是欧洲中期天气预报中心(ECMWF)的第五代全球气候和天气再分析产品,涵盖过去80年的数据。数据可从1940年开始获取,ERA5取代了ERA-Interim再分析产品。 再分析将全球范围内的模型数据与…

详解drop,delete,truncate区别

在SQL中,"DROP"、"DELETE"和"TRUNCATE"是用于删除数据的不同命令,它们之间有一些重要的区别: DROP: DROP用于删除数据库对象,例如删除表、视图、索引、触发器等。使用DROP删除的对象将…

27.哀家要长脑子了!---栈与队列

1.739. 每日温度 - 力扣(LeetCode) 用单调栈的方法做: 从左到右遍历数组: 栈中存放的是下标,每个温度在原数组中的下标,从大到小排列,因为这样才能确保的是最近一天的升高温度 如果栈为空&am…

Vue面试经验2

Vue 你说你在vue项目中实现了自定义指令,如何实现 全局指令在main.js入口文件中实现 使用方法:v-指令名称 每个钩子函数都有两个参数(ele,obj) ele:绑定指令的元素 obj:指令的一些信息(比如绑定指令的值&#xff0c…

速盾:如何选择适合自己的网络安全解决方案?

选择适合自己的网络安全解决方案是非常重要的,因为网络安全问题涉及到个人隐私和重要数据的保护。在选择网络安全解决方案时,需要考虑以下几个方面: 网络规模和需求:首先要了解自己的网络规模和需求,包括网络设备的数量…