gulp、rollup、vite了解

gulp

gulpfile.js
基于流的自动化构建工具

定义task
不支持模块化
是工具链，实现自动化工作，特点是构建工具，自动化，提高效率。

基于node stream的文件的读取写入

rollup

es module
打包第三方工具库
根据目标构建适用不同环境的文件 iife cjs umd…

rollup是一个javascript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。
打包es6 module方式写的模块化
通过import 的静态分析 实现tree shaking

rollup.config.js

vite

重定向：

使用connect 启动服务。请求.ts .css等资源 实际上重定向 请求回来的是做过转换的浏览器可以阅读的es module的js文件

预打包：

node_modules 中的第三方库预打包 在node_modules下的.vite文件中，下次编译时候不会重新打包这些模块

hmr

修改代码时候，实现hmr 不刷新浏，保存状态，只更新被修改的文件请求

js ts css less 等支持支持

vue支持

vite.config.js

• @vitejs/plugin-vue 提供vue3 单文件组件支持；
• @vitejs/plugin-vue-jsx 提供vue3 jsx支持；
• vite-plugin-vue2 提供vue2 支持

react支持

.jsx 文件

ESBuild

特点：

• 超快的构建速度，并不需要缓存；
• 支持es6和commonjs的模块化；
• 支持es6的tree shaking；
• 支持go、javascript的api；
• 支持typescript、jsx等语法编译；
• 支持sourcemap；
• 支持代码压缩；
• 支持扩展其他插件；
  原因：
  使用go语言编写，可以直接转换成机器代码，而无需经过字节码 ；
  esbuild 可以充分利用CPU的多内核，尽可能让它们饱和运行；
  esbuild 的所有内容都是从零开始编写的，而不是使用第三方，所以一开始就考虑各种性能问题；
  …

打包

vite build
vite preview 打包效果预览

构建vite项目

npm install vite vite的使用

npm init @vitejs/app
设置项目名称
这个是vite搭建项目脚手架
相当于 install 脚手架工具@vite/create-app 然后执行create-app

其他：
浏览器支持原生模块， 越来越多使用编译型语言写的javascript工具

1. 服务器启动
   vite 将应用中的模块分为源码 依赖 两类，改进开启服务器启动时间。
   依赖， 大多为纯js开发中不会变动。较大依赖尝试拆分小模块中。
   vite 使用esbuild 预构建依赖。
   源码， 不只js，需要转换，时常会被编辑。同时，并不是所有的源码余姚同时被加载。
   vite以原生ESM方式服务源码。 这实际上是让浏览器接管了打包程序的部分工作：vite只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。
2. 更新
   vite 更新HMR是在原生 ESM 上执行的，点那个编辑一个文件，只需要精确地使已编辑的模块与其最近的HMP边界之间的链失效，使HMR更新始终快速，无论应用程序大小。
   Vite 同时利用http头来加速整个页面的重新加载：
   源码模块的请求会根据304 not modified 进行协商缓存；
   依赖模块请求则通过 cache-control:maxage=31536000,immutable 进行强缓存，因此不需要再次请求

vite 是一个新型前端构建工具，能够显著提升前端开发体验，主要由两个部分构成：
一个开发服务器， 利用原生es模块提供了丰富的内建功能，热模块更新速度快
一套构建指令， 使用rollup打包，预配置输出高度优化的静态资源用于生产

浏览器支持：
开发环境： 支持原生es模块的浏览器中使用
生产环境： 可以通过官方插件@vitejs/plugin-legacy支持旧浏览器
默认支持浏览器需要支持通过脚本标签引入原生es模块

index.html 在项目根目录