这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
一、前端为什么需要构建工具
1、前端项目由一系列的资源组成：
如逻辑代码js、ts，样式代码css、scss, 静态资源png、jpeg, webp等 。
那么对这一系列资源的整合就涉及四个问题：
（1）模块化：将一个前端项目分成多个模块（文件）分别进行开发，当前没有统一的模块化标准，ESM、CommonJS、UMD...需要兼容不同模块规范、提供模块加载方案
（2）资源编译：对TS、ES6、SCSS、LESS等高级语法的编译，对一些静态资源图片字体加载
（3）产物质量: 代码体积、代码质量，代码压缩、无用代码删除
（4）开发效率：热更新
2、vite 定位：新一代前端构建工具
组成部分
（1）开发环境下不需要打包
（2）生产环境基于rollup的Bundler
核心特征：
（1）高性能，dev启动速度快，且快速热更新
（2）简单易用
3、浏览器对ESM的普遍支持
（1）script标签支持type="module"的属性
（2）在（1）标签支持ESM模块导入导出语法
4、基于ESM开发服务的优势
