Vite 的学习笔记

声明

本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。

介绍

1、Vite 是什么
vite是前端的构建工具，和webpack类似。

2、优点

极速的服务启动，使用原生 ESM 文件，无需打包。
轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）
丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。
优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。
完全类型化的API，灵活的 API 和完整 TypeScript 类型。

3、缺点

生态不及webpack，加载器、插件不够丰富
打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法

为什么服务快

1、Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

依赖大多为在开发时不会变动的纯 JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者 CommonJS）。

Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

vite 的打包过程

image.png

2、在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失活[1]（大多数时候只是模块本身），使得无论应用大小如何，HMR 始终能保持快速更新。

3、Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

安装和使用

1、安装方式

官方提供的方式

/**npm 方式*/
$ npm create vite@lastest

/** Yarn 方式*/
$ yarn create vite

/** PNPM*/
$ pnpm create vite

还可以使用官方的一些模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

其实无论使用上面的哪种方式，其实都是使用的官方封装好的vite脚手架。如果想要单独的使用vite

/* npm 方式*/
npm i vite -D
/* Yarn 方式*/
yarn add vite -D
/* PNPM 方式  要求node>= 17.0.0 */
pnpm add vite -D

2、配置文件

如果想要配置vite 需要在项目根目录下创建一个vite.config.js 的文件，vite.config.js 是编译时需要执行的，所有执行在node端

// vite.config.js
export default {
  // 配置选项
}

支持ts的配置

/** 方式一 */
/** @type {import('vite').UserConfig} */
export default {
  // ...
}

/** 方式二 */
/** 使用defineConfig 还可以让vscode 可以有语法提示 */
import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

注：Vite默认支持ESM语法，所有可以不用在package.json 中开启 type: "module"。

3、环境配置
配置可以返回一个方法，可以是异步方法，在函数中可以获取到command来区分。

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

mode的使用（vite内置了dotenv插件）:

在项目根目录中创建.env.development 和 .env.production（vite可以使用evnDir：来指定环境变量文件的位置，默认是找跟目录下面的.env 文件）
执行serve 命令时，mode 默认为development ，执行build 时，mode默认为production
.env.[mode]文件中

/** .env.development */
VITE_URL = http://www.baidu.com
VITE_USER = little-lion

可以使用loadEnv加载env 文件
loadEnv(mode, 文件所在目录, 文件名前缀)

export default defineConfig(({ command, mode, ssrBuild }) => {
   const env = loadEnv(mode, process.pwd(), '') //  process.pwd() node 启动服务根目录
})

可以使用命令行指定mode

npm dev --mode development

在js 中使用import.meta.env获取到VITE_前缀的环境变量，可以使用envPrefix改变这个前缀

    /** 使用import.meta.env */

   /* vite.config.js 中修改前缀 */
 export default {
      envPrefix: "LIKE_"
}

4、module css的使用

// 需要使用import 导入 
// css 文件名字需要添加上module
import componentCss from './component.module.css'
console.log(componentCss) // 打印看下都有什么
const div = document.createElement("div");

// ['class'] 这个是component.module.css中定义的样式选择器名字
div.className = componentCss['class']

在vite.config.js中配置

export default {
    css: {
        modules: { // 对默认行为的覆盖,传给postcss modules
            localsConvention: 'cameCase',  // 配置css 选择器转化后的名字类型---- 驼峰式
            scopeBehaviour: 'global' | 'local', // 配置当前的是模块化还是全局化
            generateScopedName: '[name]_[local]_[hash:5]',  // 生成类名的规则  https://github.com/webpack/loader-utils#interpolatename
        }
    }
}

5、插件

$ npm add -D @vitejs/plugin-legacy

// vite.config.js
import legacy from '@vitejs/plugin-legacy'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

使用enforce强制插件排序:

pre：在 Vite 核心插件之前调用该插件
默认：在 Vite 核心插件之后调用该插件
post：在 Vite 构建插件之后调用该插件

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

使用apply属性指明它们仅在 'build' 或 'serve' 模式时调用

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

更多的使用方法：Vite官网
更多的插件：Vite插件

总结

1、相对vite来说，webpack在本地起服务时，会读取所有的模块，所有到底本地启动和编译的时候比较缓慢，但是webpack的兼容性比较好，支持Commonjs规范。vite只能构建浏览器端的应用，而webpack还能构建node端的应用，所以没有必要非要使用Vite，而是针对项目而定。
2、Vite在预构建时基于esbuild进行的，但是esbuild的兼容性不好，还不太稳定，所以暂时最好不要使用esbuild，未来可学习（对我自己说的）。

Vite 的学习笔记

声明

介绍

为什么服务快

安装和使用

总结

推荐阅读更多精彩内容