Vite学习笔记

是安妮也是苏珊吖
288 阅读4分钟

Vite特点

  • 开发时效高
  • 开箱即用 功能完备
  • 社区丰富、兼容rollup
  • 超高速热重载
  • 预设应用和类库打包模式
  • 前端类库无关

Vite是什么

基本概念

vite是一个构建工具的高阶封装，内部最核心的是rollup。

Vite目标

  • 使用简单。能封装的东西都封装了，集成了devServer，不像webpack还要单独配置devServer
  • 快。
  • 便于扩展

类似产品：snowpack、WMR、@web/dev-server（官方文档有对比）

传统构建工具的区别

  • High Level API
  • 不包含自己编译的能力（编译能力来自es6和rollup，它做一个串联）
  • 完全基于ESM加载方式的开发时

总结：webpack更全面 rollup更专一 vite更好用

vite不是为了构建而生，而是为了项目而生，减少了很多配置项

Vite减少的工作

  • devServer（webpack中需要自己配置devServer）
  • 各类loader（webpack中babel-loader，ts-loader，css-loader等）
  • build命令内置[dev build serve]（webpack中可能dev和prod不同自己配置）

Vite优势

上手简单

开发效率极高

社区成本低（兼容rollup插件）

快！！

更合理的类比

Vue-cli（configureWebpack和chainWebpack可修改webpack配置）

Create-react-app（需要eject）

这些需要修改webpack仍然还要比较了解webpack配置才能修改

Vite创建vue3项目

vite伴随着vue3正式版本一起发的 最初版本1.0 以vue为主

后来快速更新版本2.0 更新为与前端框架无关的跨框架工具

npm init @vitejs/app



yarn create @vitejs/app

@vitejs/create-app is deprecated, use npm init vite instead

vscode中可以使用code vite-vue3可以进入项目

注：webpack中可以在开发时做eslint校验，可配置esloader等。但是vite中不支持，可以在vite命令中手动执行校验eslint命令

注：webpack和rollup的入口文件一般来说是js文件，但是vite的编译入口必须是html

原因：vite一开始不编辑main.js和app.vue等文件，而是直接让浏览器去加载html文件，通过html中的script标签，去加载src/main.js。script的加载请求到达vite的server时，才会去查找加载这个文件。

推荐使用yarn去安装vite的依赖，使用npm会有些问题

Vite创建vue2项目

vue2没有出现在默认语言框架列表

underfin/vue-plugin-vue2

Vite创建react项目

plugin-react-refresh=》解决了rhl无法解决的问题、速度更快、

react-hot-loader

现在的vite版本已经没有shi使用plugin-react-refresh

Vite基本使用

css

postcss.config.js中可配置css相关

vite中天然支持css-module 创建css时直接写xxx.module.scss(.css/.less)

vite 中天然支持pre-processors 只需要安装响应的loader即可 比如使用less 执行yarn add less即可

typescript

vite天生支持ts，在开发环境中vite使用的esbuild，esbuild本身就是支持ts语法的。

关于esbuild的文章

zhuanlan.zhihu.com/p/379164359

但需要注意的是vite只编译，不校验。如果我们想要校验的话，需要手动执行tsc --noEmit。

安装typescript并配置tsconfig.json

vue校验

如何校验.vue文件

vue-tsc for SFC

ts原生不支持.vue文件，所以他肯定不会做.vue文件的校验，需要使用专门的工具校验.vue文件

首先安装vue-tsc

yarn add vue-tsc

在package.json中

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc --noEmit && tsc --noEmit && vite build",

  ...

  }

isolatedModules

vite提供的typescript只是编译语法，针对单文件。但是typescript是可以关联不同的文件的，所以可以在tsconfig中配置"isolatedModules":true

Exports of Non-Value Identifiers

Non-Module Files

References to const enum members

client types

vite中提供了一些内置对象，有import.meta.url等，meta这个类型需要ts认识才能使用，不然可能会报错。

在tsconfig中配置"types":["vite/client"]

Asset imports

Enc

Hmr

静态文件处理

types

eg. import test from './test?url'

url(拿到test文件的路径）

raw（将test文件中的代码以字符串形式输出）

worker/worker inline（webworker）

json

vite自动帮忙处理好了json的引入

Import packageJson from './package.json'

web assembly

eslint&pritter

安装第三方的插件

 yarn add eslint eslint-config-standard eslint-plugin-import eslint-plugin-

promise eslint-plugin-node -D

.eslintrc.js中

module.exports = {

  extends: 'standard'

}

pritter设置首先要在vscode中安装pritter插件

然后配置.prettierrc。可自行配置格式化代码的规则，然后可以在vscode的格式化代码中配置使用prettier

{

  "semi": false,

  "singleQuote": true

}

不符合项目代码规范的===》阻止git push

实际上原理是 git hooks, 在commit之前执行某些脚本

yarn add husky

npx husky install

npx husky add ./husky/pre-commit "npm run lint"

package.json中

可自行设置eslint需要校验的文件夹

  "scripts": {

    "dev": "vite",

    "build": "vue-tsc --noEmit && tsc --noEmit && vite build",

    "preview": "vite preview",

    "lint": "eslint --ext js src/"

  },

环境变量

MODE

BASE_URL

PROD

DEV

SSR

注意：production replacement

在main.ts中输出了vite内置import.meta.env , import.meta.env.MODE

执行yarn build后编译出来的文件，import.meta.env , import.meta.env.MODE都被替换成了对应的值

总结：

在生产环境中，这些环境变量会在构建时被静态替换，因此，在引用它们时请使用完全静态的字符串。动态的 key 将无法生效。例如，动态 key 取值 import.meta.env[key] 是无效的。

avatar
文章
阅读
粉丝