共计 1890 个字符，预计需要花费 5 分钟才能阅读完成。
构建工具概念及作用
打包:将咱们写的浏览器不意识的代码解决的过程就叫做打包，打包实现当前会给咱们一个浏览器能够意识的文件。
构建工具做的工作
1. 模块化开发反对:反对间接从 node_modules 里引入代码 + 多种模块化反对；
2. 解决代码兼容性:比方 babel 语法降级，less,ts 语法转换 (不是构建工具做的，构建工具将这些语法对应的解决工具集成进来自动化解决)；
3. 进步我的项目性能: 压缩文件，代码宰割；
4. 优化开发体验:
热更新：构建工具会帮你主动监听文件的变动，当文件变动当前主动帮你调用对应的集成工具进行从新打包，而后再浏览器从新运行 (整个过程叫做热更新，hot replacement)；
跨域问题：解决开发服务器跨域的问题，用 react-cli create-react-element vue-cli 解决跨域的问题。
webpack 和 vite 比照
webpack 须要先把依赖解析完，才开启服务器 Vite 先开启服务器，按需解析依赖。
因为 webpack 反对多种模块化，他一开始必须要对立模块化代码，所以意味着他须要将所有的依赖全副读一遍；
vite 是基于 es modules 的，侧重点不一样，webpack 更多的关注兼容性，而 vite 关注浏览器端的开发体验。
Vite 做了哪些工作
依赖预构建
首先 vite 会找到对应的依赖，而后调用 esbuild(对 JS 语法进行解决的一个库)，将其余标准的代码转换成 esmodule 标准，而后放到当前目录下的 node_modules/.vite/deps，同时对 esmodule 标准的各个模块进行对立集成
1. 将文件转为规范格局；
- 门路转为对立门路；
- 引入第三方文件 import 改到 index.js 中，防止浏览器加载。
依赖预构建解决了 3 个问题:
1. 不同的第三方包会有不同的导出格局(vite 没法的束人家)；
- 对门路的解决上能够间接应用.vite/deps，不便门路重写；
- 网络多包传输的性能问题(也是原生 esmodule 标准不敢反对 node_modules 的起因之一)，有了依赖预构建无论有多少个额定的 export 和 import，vite 都会尽可能的将他们进行集成，最初只生成一个或者几个模块。
//js 文件
export {default as a} from '.a.js'
//vite 重写后
function a(){}vite 解决.vue 文件
服务端遇到了以 vue 后缀结尾的文件时，在服务端会去读取这个文件，而后去查找 template，script 等关键字，最初以字符串的模式去解决截取替换等，而后最重要的是在返回的时候 设置相应类型，最初让浏览器强制以 js 的模式去解决。
https://juejin.cn/post/7172119422562205710
vite 解决 css
vite 天生就反对对 css 文件的间接解决。
1. vite 在读取到 main.js 中援用到了 index.css；
- 间接去应用 fs 模块去读取 index.css 中文件内容；
- 间接创立一个 style 标签，将 index.css 中文件内容间接 copy 进 style 标签里；
- 将 style 标签插入到 index.html 的 head 中；
- 将该 css 文件中的内容间接替换为 js 脚本(不便热更新或者 css 模块化)，同时设置 Content-Type 为 js，让浏览器以 JS 脚本的模式来执行该 css 后缀的文件。
vite 配置
（1）Dotenv
服务端：
读取您的文件，解析内容，将其调配给 process.env，并返回一个 Object，其中蕴含蕴含加载内容的键或失败的键 Vite 我的项目中引入 dotenv import * as dotenv from 'dotenv';
dotenv 会主动把命名为.env.*（用于辨别以后运行环境，生产环境、开发环境 …）文件中名称以 VITE 结尾的属性放入 process.env 并会依据 package.json 运行指令判断拿去对应文件内容。
客户端：
Vite 在一个非凡的 import.meta.env 对象上裸露环境变量，默认辨认 VITE 结尾的。envPrefix:’ENV’, 配置前缀 ENV（VITE）结尾的被 import.meta.env 辨认
待调研
（1）热更新；（2）Webpack 编译原理；（3）Esmodule;（4）Npm i -D -s（5）Package.json scripts（6）Rollup vite 生产环境打包库（7）process.cwd 办法: 返回以后 node 过程的工作目录
参考
(1).https://www.bilibili.com/video/BV1GN4y1M7P5/?p=10&spm_id_from…