Vite该如何使用？Vite学习笔记，持续记录

Vite 学习记录

配置文档：https://cn.vitejs.dev/config/，基于 ESM；

插件大全：https://github.com/vitejs/awesome-vite

通过插件支持低版本浏览器：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

1.vite 使用 scss

Vite 使用 scss 预处理器：npm install sass -D，安装后可直接使用。

官方文档：https://cn.vitejs.dev/guide/features.html#css-pre-processors

2. 将 js 模块当做 url 导入

如果我们只是想获取脚本的 url，不想导入脚本，可以通过在导入路径后添加?url 后缀。

import asyncUrl from './async_demo.js?url';
console.log(asyncUrl); /*/importassets/async_demo.js*/
if (true) {import(/* @vite-ignore */asyncUrl).then(m => {console.log(m) // Module {Symbol(Symbol.toStringTag): "Module"}
    });
}

// 做字符串引入
import shaderString from './shader.glsl?raw'

相关文档：https://zhuanlan.zhihu.com/p/401882229

4. 定义一个目录的别名

 /* 引入 path 模块 */
import path from 'path'

/* 解析生成指定目录的完整目录 */
function resolve(dir) {return path.join(__dirname, dir);
}

/* 定义 vite 的配置 */
export default defineConfig({
    resolve:{
          alias:{'@':resolve('src')
          }
    }

})

5.vite 编译说明

运行过程中依赖的一些文件会保存在 node_modules/.vite 文件夹里，有时候出现一些莫名的问题，可以尝试删除这个目录，重新运行试试。

vite 配置项

1. 常用配置项

1. root，指定项目根目录。
2. build.outDir，指定编译的输出目录（相对于根目录）
3. build.assetsDir，编译后静态文件存放的目录（相对于输出目录）

2.vite 配置 babel

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码。注意：Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API。有的同学可能分不清哪些是 ES6 句法，哪些是 API，这个暂时先放一放，后面会讲。

Polyfill 的准确意思为，用于实现浏览器并不支持的原生 API 的代码。

在构建生产时不支持本机 ESM 的旧版浏览器提供支持：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy，插件将进行如下操作：

• 为最终包中的每个块生成相应的遗留块，使用 @babel/preset-env 转换并作为 SystemJS 模块发出（仍然支持代码拆分！）。
• 生成一个 polyfill 块，包括 SystemJS 运行时，以及由指定的浏览器目标和包中的实际使用确定的任何必要的 polyfill。
• 将标签注入

  5.vite-plugin-cdn-import

  作用：用于从 CDN 导入模块

  项目地址：https://www.npmjs.com/package/vite-plugin-cdn-import

  npm install vite-plugin-cdn-import --save-dev
  

  vite.config.js 配置如下（使用 cdn 的同时也需要安装这个软件包，在打包的时候将会自动替换）：

  import importToCDN, {autoComplete} from 'vite-plugin-cdn-import'
  // 支持自动导入部分软件包
  export default defineConfig({
      plugins: [createVuePlugin(),
          importToCDN({
              modules: [autoComplete('vue2'),
              ]
          })
      ]
  }
  

  6.@vitejs/plugin-legacy

  作用：Vite 默认的浏览器支持基线是原生 ESM。该插件为不支持原生 ESM 的传统浏览器提供支持。

  项目地址：https://github.com/vitejs/vite/tree/main/packages/plugin-legacy

  7.@vitejs/plugin-vue

  作用：用于支持 vite 进行 vue 开发，安装 vite 时同步安装

  import vue from '@vitejs/plugin-vue';
  export default defineConfig({
    plugins: [vue()
    ]
  })
  

  8.unplugin-auto-import

  作用：自动引入开发过程中需要使用的 API

  项目地址：https://github.com/antfu/unplugin-auto-import

  npm i -D unplugin-auto-import
  

  vite.config.js 配置如下：

  // vite.config.ts
  import AutoImport from 'unplugin-auto-import/vite'
  
  export default defineConfig({
    plugins: [
      AutoImport(
         {imports: ['vue', '@vueuse/core'], // 需要自动引入的包
        resolvers: [ElementPlusResolver(), // 支持组件库自动引入
        ],
        dirs: ['./composables', // 配置文件生成位置],
        dts: './auto-imports.d.ts',// 生成文件路径
        vueTemplate: true, //Auto import inside Vue template,
        ...
      }
      ),
    ],
  })
  

  9.vite-plugin-vue2

  作用：支持在 vite 上使用 vue2.x 进行开发。

  项目地址：https://github.com/underfin/vite-plugin-vue2

  npm install vite-plugin-vue2 -D
  

  vite.config.js 配置如下：

  // vite.config.js
  import {createVuePlugin} from 'vite-plugin-vue2'
  
  export default {
    plugins: [createVuePlugin(/* options */)
    ],
  }

  除此之外，在安装 vite 的时候选择原生开发（vanilla），然后继续安装：

  $ npm install vue@2.x  #安装 vue2.x 版本
  # 2.x 版本编译器：https://www.npmjs.com/package/vue-template-compiler
  $ npm install vue-template-compiler
  

  10.vite-plugin-inspect

  作用：在使用、开发 vite 插件时，查看插件的中间状态

  项目地址：https://www.npmjs.com/package/vite-plugin-inspect

  vite.config.js 配置如下：

  // vite.config.ts 
  import  Inspect  from  'vite-plugin-inspect' 
  
  export  default  { 
    plugins : [Inspect () ,  // 仅适用于开发模式
    ] , 
  }
  

  然后访问 localhost:3000/__inspect/ 来检查模块。

  11.vite-plugin-compression

  项目地址：https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md

  vite.config.js 配置如下：

  import viteCompression from 'vite-plugin-compression';
  
  export default defineConfig({
      plugins: [viteCompression()
      ]
  })

  12.vite-plugin-html

  vite-plugin-html 用于压缩打包后的 html，以及注入指定的 data 数据。

  项目地址：https://github.com/vbenjs/vite-plugin-html

  13.vite-plugin-imagemin

  用于压缩项目内的图片资源。

  项目地址：https://github.com/vbenjs/vite-plugin-imagemin/blob/main/README.zh_CN.md

  14.vite-plugin-wasm

  提供对 wasm 模块导入的支持。

  项目地址：https://www.npmjs.com/package/vite-plugin-wasm、https://github.com/Menci/vite-plugin-wasm

  15.vite-plugin-top-level-await

  vite-plugin-top-level-await 用于支持 top-level-await 特性

  16.vite-plugin-css-injected-by-js

  用于打包的时候将 css 打包到 js 文件中。

  项目地址：https://github.com/Marco-Prontera/vite-plugin-css-injected-by-js

  cssInjectedByJsPlugin()