vite基本配置

vite项目的创建

下载pnpm

npm i pnpm -g

pnpm的是npm和yarn的一个衍生，但是逐步替代npm和yarn，原因就是pnpm可以解决npm和yarn无法解决的问题，比如

速度上，pnpm是npm或者yarn的两倍

hard link 机制,hard link 使得用户可以通过不同的路径引用方式去找到某个文件。pnpm 会在全局的 store 目录里存储项目 node_modules 文件的 hard links 。

Store 目录,每次安装依赖的时候，如果是个相同的依赖，有好多项目都用到这个依赖，那么这个依赖实际上最优情况(即版本相同)只用安装一次。如果是 npm 或 yarn，那么这个依赖在多个项目中使用，在每次安装的时候都会被重新下载一次,相当于缓存

还有许多的问题，比如node_modules 结构，symlink 和 hard link 机制， 兼容问题， Monorepo 支持 ，workspace 支持， Phantom dependencies， NPM doppelgangers等等等等，具体查询baijiahao.baidu.com/s?id=171123…

esbuild以及集成

import { defineConfig } from 'vite'
// 默认集成了HMR（热更新）
// 包括Vue  SFC
// React Fast Refresh
// preact
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 自定义行为  加载依赖构建
  optimizeDeps: {
    // include: ['esm-dep']  // 里面存在保存的包
  },
  // 有三种情况可以让 esbuild 重新打包,重新运行我们预构建（文件系统缓存）
  // 1.package.json 中的 dependencies 对象发生改变
  // 2.lockFile文件有所更新
  // 3.vite.config.js 中有模块的更新

  // 强制进行本地服务端刷新缓存 重新执行esbuild
  // "devForce": "vite --host --force", 
  cacheDir:'./cache'  // 改变打包文件的路径
})

HMR

默认在create vite中已经集成了HMR的配置，并且只是在开发环境中方便我们开发者做热更新，热重载的，如果是做纯JS的，应该这样来写HMR

局部检测

// HMR配置
// HMR只在开发环境中使用,生产环境不需要
// 所以可以通过 import.meta.hot 这个对象判断是否在开发环境中

// 局部检测
if( import.meta.hot ){
    import.meta.hot.accept( (newModule)=>{
        console.log(newModule.count);
    })
}

全局检测

import "./count.js";
import { foo } from "./foo.js";

foo();

// 全局检测
if (import.meta.hot) {
  import.meta.hot.accept('./foo.js',(newModule) => {
    newModule.foo()
  });
  // 当前文件一但发生变成就会触发HMR
  import.meta.hot.accept()
}

具体配置

配置说明：
import.meta.hot.data                            表示可以拿到上次热更新之前的值，相当于Vuex
例：cache = { amount: 1 }
cache = import.meta.hot.data.cache = { amount: import.meta.hot.data.cache?.amount } 
解释：a = b =  c   原生JS中  C先赋值给A，再赋值给B

import.meta.hot.accept()                        表示当前组件发生变化时，触发HMR
import.meta.hot.accept(callback)                表示当前组件发生变化时，触发HMR,并可以改成值
import.meta.hot.accept(string,callback)         表示'string'组件发生变化时，触发HMR,并可以改成值
import.meta.hot.accept(string[],callback[])     表示'string[]'组件发生变化时，触发HMR,并可以触发'callback[]'

import.meta.hot.dispose(callback)               表示清除副作用的函数，比如我上次有个setInterval函数，模块热重载时候，会发现上一个定时器没有被清除，这时候上一个定时器就是副作用了
例：import.meta.hot.dispose(()=>{ if timer clearInterVal(timer) }) 

import.meta.hot.invalidate()                    表示刷新页面，不执行热更新
import.meta.hot.decline()                       表示与accept相反，不是HMR而是刷新