vite3学习记录

通过vite 创建一个项目

pnpm create vite

1. 设置项目名称
2. 选择语言框架
3. 选择 ts/js ts/swc js/swc
   swc 是新生代的 js/ts编译器 ， 使用 rust 编写。相比于 babel 编译速度更快。
   
   vite 通过 dev-server 将请求转换为浏览器原生能编译的产物。
   一个 import 语句代表一个 HTTP 请求，而正是 Vite 的 Dev Server 来接收这些请求、进行文件转译以及返回浏览器可以运行的代码。
   npm run build 命令中，通过 tsc 来做类型检查。
   

在 vite 中使用全局 scss 变量

// vite.config.ts
import { normalizePath } from 'vite';
// 如果类型报错，需要安装 @types/node: pnpm i @types/node -D
import path from 'path';

// 全局 scss 文件的路径
// 用 normalizePath 解决 window 下的路径问题
const variablePath = normalizePath(path.resolve('./src/variable.scss'));


export default defineConfig({
  // css 相关的配置
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData 的内容会在每个 scss 文件的开头自动注入
        additionalData: `@import "${variablePath}";`
      }
    }
  }
})

在 vite 中，配置 postcss. 例如样式添加浏览器前缀。

import autoprefixer from 'autoprefixer';

export default {
  css: {
    // 进行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目标浏览器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
}

1、可安装 vue-tsc ，通过运行vue-tsc --noEmit来对vue文件进行类型检查

2、vite使用esbuild 将 ts转换为js

3、在当前vite3.02版本中，暂时需要将tsconfig.json中的compilerOptions选项中，设置

"isolatedModules": true 和 "skipLibCheck": true. 因为vue对新版本的ts的支持度不是太好，做适配处理。

4、vite也通过esbuild来对tsx进行支持。 在vue中可以使用@vitejs/plugin-vue-jsx 插件来支持进行书写jsx代码。

5、使用import来加载静态资源

6、使用import.meta.glob来实现全局导入

7、vite的目标是现代浏览器，添加vite对传统浏览器的支持如下

8、常见的图像、媒体和字体文件类型被vite自动检测为资源，并在打包时进行自动处理，例如开发环境时 图片路径为 /img.png,但在打包会处理为 /assets/img.hashcode.png。可以在vite.config.ts中使用 assetsInclude 选项 扩展vite对静态资源的检测。例如.gif

9、可以通过将某些单一使用的静态资源放置到public目录下，使用类似/icon.png的绝对路径来进行访问

10、vite通过rollup来进行打包

11、 vite通过import.meta.env来暴露环境变量，常见的内置变量有

12、创建的自定义环境变量中，必须以VITE_开头，才能通过import.meta.env.VITE_MY的形式来访问

13、 通过在src目录下穿件env.d.ts文件，来添加对自定义环境变量的类型提示

14、可以在构建时进行不同模式的环境编译

15、vite特有的插件以vite-plugin-开头。使用插件时，除了在package.json中声明，还需要在vite.config.json中引用，并在plugins中使用

16、配置的时候使用环境变量

17、vite 中，如果静态资源小于 4kb，则转换为base64数据格式，这个阀值的可以在 assetsInlineLimit 中进行设置。

/ vite.config.ts
{
  build: {
    // 8 KB
    assetsInlineLimit: 8 * 1024
  }
}

18、vite 中 使用 vite-plugin-imagemin 来进行图片压缩

19、可使用 vite-plugin-svg-icons 进行生成 svg 雪碧图

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

20、vite 中的使用 Esbuild 进行开发阶段的依赖预构建

1、依赖预构建会将第三方包依赖中的其他格式 （common.js、UMD） 转换成 ESM 。让其能在浏览器中通过 <script type='module'></script> 进行加载。
2、依赖预构建会打包第三方库的代码，将第三方库分散的文件组合到一起，减少因代码依赖关系而引起的 http 请求。