vite的学习笔记

Vite学习：

构建工具构建工具不需要我们关心我们写的代码每次在浏览器中的运行，我们只需要首次提供一个配置文件，有了这个配置文件以后，我们就可以在下次需要更新的时候调用一次对应的命令就好了。通过结合热更新，我们就更加不用管任何东西了。

vite比webpack的优点。
1:webpack支持多模块化，他一开始必须要统一模块化代码，意味着他需要将所有的依赖读一遍，因此当项目越大，就需要很长的时间启动开发服务器。而 vitet它是基于es modules，所以不需要读所有依赖文件。

2:webpack需要将所有的开发模块都加载完，然后再启动开发服务器。而vite是先启动开发服务器，然后按需加载。所以vite要比webpack快。

依赖预构建：vite支持多模块的实现，vite通过收集对应的依赖，然后调用esbuild(对js语言进行处理的一个库），将其他规范的代码转换成esmodule规范，然后放到当前的目录下node_modules/.vite/deps

解决了三个问题：
1.不同的第三方会有不同的导出格式
2.对路径的处理上可以直接使用.vite/deps

vite:配置文件的细节

1:vite配置文件的语法提示：
方法一：通过defineConfig

import { defineConfig } from “vite”;
export default defineConfig({
optimizeDeps:{
exclude: [],
},
})

方法二：
/**

• @type import(“vite”).UserConfig
  */
  const viteConfig = {
  optimizeDeps:{
  exclude:[],
  },
  }
  2:关于环境的处理
  在过去的webpack，需要区分配置文件的环境
  webpack.dev.config
  webpack.prod.config
  webpack.base.config

Vite中的环境变量处理：

vite通过dotenv第三方库，自动读取.env文件，并解析这个文件中对应环境变量，并将其注入到process对象中（但是vite考虑会和其他配置的一些冲突，他不会直接注入到process对象下去）

涉及到vite.config.js中的一些配置：
-root
-envDir:用于配置当前环境变量的文件地址

Vite给我们提供了一个补救措施：我们可以调用vite的loadEnv来自动确认env文件

import { defineConfig, loadEnv } from “vite”;
export default defineConfig((command,mode)=>{
const env = loadEnv(mode,process.cwd(),“”);
console.log(“env///”,env);
return {};
})

.env是所有环境需要用到的环境变量
.env.development:开发环境用到的环境变量
.env.production:生产环境用到的环境变量

“scripts”: {
“dev”: “vite --mode development”,
“build”: “vite build --mode production”,
“test”: “vite --mode test”,
“preview”: “vite preview”
},

npm run dev —mode development 会将mode设置为development传递进来

当我们调用loadenv的时候，他会做如下的几件事儿
1:直接找到.env文件，解析其中的环境变量放入一个对象里
2:会将传进来的mode这个变量的值进行拼接：”.env.development”,并根据我们提供的目录去取对应的配置文件并进行解析，并放进一个对象

可以理解为：
const baseEnvConfig = 读取.env配置
const modeEnvConfig = 读取env相关配置
const lastEnvConfig = { …baseEnvConfig , …modeEnvConfig}

客户端，vite会将对应的环境变量注入到import.meta.env里去,
Vite做了一个拦截，他为了防止我们将隐私性的变量直接送进import.meta.env中，所以他做了一层拦截，如果你的环境变量不是以VITE开头的，他就不会帮你注入到客户端中。

vite中处理css
vite先读取main.js中引入的index.css文件，直接使用fs模块读取index.css中的文件内容，创建一个style标签，将index.css中的文件内容直接copy进style标签里，然后将style标签插入到index.html的head中，将该css文件中的内容直接替换为js脚本，同时设置（Content-Type)为js，从而让浏览器以js脚本的形式来执行css后缀的文件。

当我们在协同开发的时候，两个人开发用了相同的类名，这样导致了样式的覆盖，为了解决这个问题需要用到css模块化。
设置css文件名为，xxx.module,css
css文件的引入：import xxx from “./xxx.module.css”
div.className=xxx.footer;

vite静态资源的处理：
import { defineConfig } from ‘vite’;
import path from ‘path’;
import vue from ‘@vitejs/plugin-vue’;

// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
‘@’: path.resolve(__dirname, ‘src’),
‘/images’: ‘/src/assets/images’,
},
},
plugins: [vue()],
});
配置别名

引入静态文件：
new URL(“…/assets/images/02.png”,import.meta.url).herf,