构建工具概念及作用
打包:将咱们写的浏览器不意识的代码解决的过程就叫做打包，打包实现当前会给咱们一个浏览器能够意识的文件。
构建工具做的工作
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...