vite学习

vite解决了webpack什么问题

• 在多个文件(上千文件)的情况下，webpack总是会吧所有的文件build，在启动服务，而vite是先启动服务，然后再根据route，按需加载
• webpack更多的兼容更多的模型，commonjs，es,都做了兼容 如webpack_require() 函数重写

    const lodash = require('lodash')
    import Vue from 'vue'
        ->
    const lodash = webpack_require('lodash')
    const Vue = webpack_require('vue')
        
    // 这些导入 webpack都是支持的，但是vite以来网络请求，只是支持esmodule
    //如webpack做的优化, 在webpack.config.js 会有entry的配置
    
    {
    "src/index.js": (webpack_require) => {
            const lodash = webpack_require('lodash')
            const Vue = webpack_require('vue')
        }
    }
    
    (() => {
        function webpack_require(){}
        
        module[entry](webpack_require)
        
    })()

vite还解决了3个问题

• 不同的第三方包会有不同的到处格式（这个是vite没法约束人家的事情）
• 对路径的的处理上直接使用.vite/deps， 方便路径重写
• 网络多包传输的性能问题（同时也是esmodule规范不凡支持node_modules的原因之一）

vite的环境变量配置

1. vite内置了ditenv 会自动读取.env文件，并解析这个文件中的配置信息，然后将其注入到process.env中（但考虑到多个环境的配置，不会之际注入到process.env中）
2. vite配置环境变量的envPrefix默认的VITE_,在配置可以修改

   export default defineConfig({
     envPrefix: 'XEQ_',
   })
   

   • 之后的配置需要加上XEQ_ 前缀才会生效

         // .env.developmetn
         XEQ_API_URL=http://localhost:3000
         
         // .env.production
         XEQ_API_URL=http://localhost:3001
         
         // .env.staging
         XEQ_API_URL=http://localhost:3002
     

   • 可以在package.json配置scripts脚本

         "scripts": {
             // 其实就是dotenv做了这些事, 默认就是 vite --mode development
             "dev": "vite", 
             "dev_staging": "vite --mode staging",
             "build": "vite build --mode production"
           },
     

   • process.cwd() 返回的是当前的node进程工作目录 dir
   • 在vite.config.js文件的读取不同环境的api可以使用loadEnv

         export default defineConfig(({ command, mode }) => {
           const env = loadEnv(mode, process.cwd(), '')
           console.log(env)
         })
     

     其中loadEnv的方法: 源代码： github.com/vitejs/vite…

     declare function loadEnv(mode: string, envDir: string, prefixes?: string | string[]): Record<string, string>;
     // 这让内部的实现就是读取到对于的文件，然后解析，转换成Dict的形式（对象）【由node实现: fs.readSync() ...】
     

   • 在客户端vite会默认吧环境变量注入到import.meta.env当中
   • tip： vite.config.js可以书写esmodule形式，因为vite读取config文件会node先解析文件语法，若是esmodule规范就转成commonjs规范

vite alias的原理

主要就是字符串替换的原理，详细介绍了： juejin.cn/post/738965…