工程化
- Eslint es的核心包
- eslint-plugin-vue eslint关于检测Vue代码规范的插件
- @typescript-eslint/parser eslint的解析器，用于解析ts，从而检测和规范typescript代码
- @typescript-eslint/eslint-plugin 这是eslint插件 包含各个定义好的检测typescript代码的规范
- prettier prettier核心包
- eslint-config-prettier 解决eslint中的样式规范和prettier中的样式规范的冲突，以prettier的样式规范为准，使eslint中的样式规范失效
- eslint-plugin-prettier 将prettier作为eslint规范使用
- @vitejs/plugin-vue-jsx 其实就是封装了@vue/babel-plugin-jsx 用来在vite中更使用
vite自定义插件
自定义vite插件 需要返回一个对象包含以下几种属性
| 字段 | 说明 | 所属 |
|---|---|---|
| name | 插件名称 | vite和rollup共享 |
| handleHotUpdate | 执行自定义HMR更新处理 | vite |
| config | 在解析vite配置前调用。可以自定义配置，会与vite基础配置进行合并 | vite |
| configResolved | 在解析vite配置后调用。可以读取vite的配置，进行一些操作 | vite |
| configureServer | 是用于配置开发服务器的钩子。最常见的用例是在内部connect应用程序中添加自定义中间件 | vite |
| transformIndexHtml | 转换index.html的专用钩子 | vite |
| options | 在收集rollup配置前，vite本地服务启动调用，可以和rollup配置进行合并 | vite rollup |
| buildStart | 在rollup构建中，vite服务启动时调用，在这个函数中可以访问rollup的配置 | vite rollup |
| resolveID | 在解析模块时调用，可以返回一个特殊的resolveId来制定某个import语句加载特定的模块 | vite rollup |
| load | 在解析模块时调用，可以返回代码块来指定某个import语句加载特定的模块 | vite rollup |
| buildEnd | 在vite本地服务关闭前，rollup输出文件到目录前调用 | vite rollup |
| closeBuild | 在vite本地服务关闭后，rollup输出文件到目录后调用 | vite rollup |
vite会将预构建的依赖缓存到
node_modules/.vite。它根据几个源来决定是否需要重新运行预构建步骤
- package.json中的dependencies列表
- 包管理器中的lockfile。例如package-lock.json，yarn-lock，或者pnpm-lock.yaml
- 可能在vite.config.js相关字段中配置过的
只要出现上述其中一项发生改变的时候，才会需要重新构建。
如果处于某种原因，需要强制Vite重新构建依赖，可以使用—force命令进行启动开发服务器，或者手动删除node_modules/.vite目录
浏览器缓存
解析后的依赖请求会以HTTP头max-age=31xxxx强缓存，以提高在开发时的页面重载性能。一旦被缓存，这些请求将永远不会再大道开发服务器。如果安装了不同的版本，则附加的版本query会自动使他们失效。如果你想通过本地编辑来调试依赖项目，可以
- 通过浏览器调试工具的Network选项卡暂时禁止使用缓存
- 重启vite dev serve 并且添加—force命令以重新构建以来
- 重新载入页面
vite执行所谓的依赖预构建。这个过程有两个目的
- Commonjs和UMD兼容性：开发阶段中，VITE的开发服务器将所有的代码视为原生ES模块。因此，Vite必须先将作为CommonJS 或者UMD发布的依赖项目转换成ESM。当转换Commonjs 依赖时，Vite会执行智能蹈入分析，这样即使导出是动态分配的，也会按照名字导入。
- 性能： Vite将有许多内部模块的ESM依赖转换成单个模块，以提高后续页面加载性能。一旦包将他们的ES模块构建作为单个文件需将导入。例如loadsh-es有超过600个内置模块，当我们执行import {} from ‘loadsh-es’时，浏览器同时发送600多个HTTP请求，尽管服务器在处理这些请求时没有问题，但是大量的请求会在浏览器造成网络堵塞，导致页面加载相当的缓慢。通过预构建loadsh-es成一个模块，我们就只需要一个HTTP请求了
需要注意的是 依赖预构建会在开发模式下应用，炳辉使用esbuild将依赖转换成ES M模块，在生产模式则会使用@rollup/plugin-commonjs
自动依赖搜寻
如果没有找到相应的缓存，vite会抓去源码，并自动寻找引入的依赖项目，并将这些以来项目作为预构建包的入口点。预构建通过esbuild执行，所以通常会很快。在服务器已经启动之后，如果遇到一个新的依赖关系导入，而这个依赖关系还没在缓存中，vite会将重新运行以来预构建进行并且重新load页面
Monorepo和连接依赖
在一个monorepo启动中，该仓库中的某个依赖可能作为另一个包的依赖。Vite会自动检测没有从node_modules解析的依赖项，并将链接的依赖是为源码。它通常打包被连接的依赖，而是会分析被依赖连接的依赖列表。
然而这需要被链接的依赖被到处为ESM格式，如果不是，那么可以在配置里将此以来天假到optimizeDeps.include和build.commonjssOptions.include这两项中。
当这个被连接的依赖发生变更后，在重启开发服务器时命令中带上—force选项让所有变更生效/