Vite 从入门到精通，玩转新时代前端构建法则笔记第2章 Vite 的基础应用 webpack和rollup的编译入口一

第2章 Vite 的基础应用

webpack和rollup的编译入口一般是js文件，而vite的编译入口是html文件，vite不编译，通过浏览器加载html文件，对里面的script进行加载，请求到达vite的server之后，vite会去查找这个文件，然后对它进行编译

@vitejs/plugin-vue-jsx插件

vite对ts，只编译不校验，ts文件需要单独在命令行里添加tsc --noEmit，vue文件需要使用vue-tsc，ts原生是不支持.vue文件的

自定义环境变量

console.log('Hello World', import.meta.env)
// 打包的时候会把值replace再进行打包

可以在vite-env.d.ts文件中，增加类型说明，否则会使用vite默认的类型

第3章 Vite 的高级应用

Vite 中的 HMR 热更新功能

热更新的实现方式与使用的框架是有关的（vue、react）

主要是利用vite提供的api，来实现热更新, 通过websocket，告诉在浏览器中运行的vite代码，有文件进行更新了，浏览器就会发起新的请求，请求的就是新的代码

Vite 的 glob-import 批量导入功能

3-4 Vite 预编译

第一次启动的时候，依赖的第三方包就会被预编译，后面直接从中读取，不需要再次编译，在这个预编译的过程中，会把非es module的模块编译为es module（这样vite才能正常加载），还会把零散的文件，打包在一起, 第三方库加载的时候，响应头是会设置缓存的，但是项目中的代码不会有缓存，以防不更新

第4章 Rollup 系统学习

动态加载模块

esmodule和commonjs的区别

1.Common JS模块通过require函数和module对象来进行模块管理，而这两个函数则是在JS脚本执行前，有JS引擎通过VM进行注入的全局对象，本质上他们就是JS的函数或者对象，可以在任意地方被引用和使用，他们的运行的同时也是JS运行的同时。而ES Module的import和export则不同，他们是关键字，在脚本被语法解析还没有执行时，就已经可以知道该模块导入或者导出了什么内容，本质上这两个模块管理方式的执行时机就是不同的。