vite 向html中注入代码 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { name: 'bundle-time', // 打包时添加打包时间 apply: 'build', enforce: 'post', transformIndexHtml: () => { return [ { tag: 'script', children: `console.info("bundle time: %s", '${new Date().toLocaleString()}')`, injectTo: 'body' } ] } }
vite配置代理中变更请求头 🔗平时我们在对接接口时,我们都是配置代理解决跨域问题 1 2 3 4 5 6 7 proxy: { '^/api': { target: envConfig.VITE_APP_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), } } 某天你明明配置好
Vite client overlay 🔗利用Custom Component中的自定义组件,封装了一个自定义的web 标签 1 2 3 4 export const overlayId = 'vite-error-overlay' if (customElements && !customElements.get(overlayId)) { customElements.define(overlayId, ErrorOverlay) } 实例化方法 🔗 1 2 3 4
vite Client客户端源码 🔗vite 客户端使用来响应服务端文件改动, 最终客户端的代码通过注入的方向,注入到index.html中,实现热更新功
从0阅读vite 🔗commit1 🔗vite项目的第一个提交,只有6个文件有代码,真实代码不会超过1000行,所以说真的是又个好的想法,尽管去
Vite 插件机制及实现原理 🔗 “version”: “3.0.0-alpha.10” 源码位置 🔗packages/vite/src/node/server/pluginContainer.ts 整个文件
Vite – moduleGraph源码解读 🔗vite中使用moduleGraph去记录模块之间的引用关系 源码位置 🔗packages/vite/src
vite hmr热更新源码 🔗vite中在文件发生改动时,server端会监听文件的变化,当文件发生变化会通知客户端重新发起请求,重新渲染页面 源码位置
vite中env环境变量使用 🔗 “version”: “3.0.0-alpha.9” vite中可以通过loadEnv函数去读取指定环境变量文件,可以方便在vite配置文件中动态的导入到配置中
vite 中有关 websocket 的使用 🔗封装 🔗项目是基于第三方npm包 ws, 这个包是为服务端使用websocket而设计的,并不适用浏览器中,项目地址 https://github.com/websockets/ws 项目中文件路径
vite – open browser 🔗 “version”: “3.0.0-alpha.9” open 🔗open是一个第三方开发的开源库,用于在命令行打开浏览器,本身已经对各个平台的的代码做了兼融,知识对外部暴露了api 使用方
vite 🔗resolveConfig 🔗 找到vite对应的config文件,并且判断config文件类型,是否是ts文件还是mjs文件 通过esbui
vite server 🔗 3.0.0 源码位置 🔗packages/vite/src/node/server/index.ts createServer 🔗步骤 解析配置文件 1 const config = await resolveConfig(inlineConfig, 'serve', 'development') 创建中间件
Vite – websocket相关源码 🔗 2.9.8 packages/vite/src/node/server/ws.ts createWebSocketServer 🔗源码通过在函数内实例化ws,返回一个对象函数,充分利用js闭包的属性 1 2 3 4 5 6 7 8 9 function createWebSocketServer() { // .... source code
问题清单 🔗 vite中使用optional chain ?. 失效问题 引入rollup-plugin-esbuild 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21