vite - ⚡️初识Vite: 基本使用 - 《前端工程》

概览
- 是什么（What）？
- 优势（Why）？
初体验
- Vite新建项目(@vitejs/app)
基础功能体验

官网文档

概览

是什么（What）？

一种新型前端构建工具，能够显著提升前端开发体验。
Vite分两部分，开发时作为一个开发服务器，生产时依赖Rollup为项目打包。

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

优势（Why）？

简单的了解和体验下来，感觉其最核心的优势在：开发快、配置方便；
Vite最早是随Vue3一起发布，最初也是只支持Vue，但早期版本迅速迭代掉了，如今的Vite已经能支持各种主流框架，而且提供了初始化模版，项目配置起来比较简单了。

Vite为什么在开发时快呢？
官网有一节专门讲了：Why Vite？总结几个核心的原因：

esbuild: Vite 使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
动态导入代码： Webpack，即使是在开发阶段，也是从入口开始，遍历每一个依赖的文件，将他们进行转换和整合。但是得益于ESM被浏览器支持，浏览器本身就能接管了打包程序的部分工作，Vite做的事情是，对当前屏幕上实际使用的相关文件进行相关转换处理。

webpack模式

esm模式
上面这两幅图的对比再次强调了这样的不同：Vite启动的时候没有编译全部，不像webpack从entry进去每一个依赖的模块都编译一遍。这就可以说是按需求编译的，因为浏览器支持esm，所以不需要讲这些js文件合并成一个文件，也就不用都编译一遍了。

为了支持这个特性，Vite有一个重要的约定就是，项目入口在index.html（不是 .js 了）,文件如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!--这里是入口 -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

过程是这样的：浏览器加载这个html，必然会加载那个script（type=”module”），所以，浏览器的请求到达了vite 的dev server，server去查找这个文件，然后编译这些文件。（这里参考这篇文档）

初体验

Vite新建项目(@vitejs/app)

官网参考

npm init @vitejs/app 或者 yarn create @vitejs/app
选择模版

这几个模版 vanilla（原生的）、vue、react、preact….比如选择react，选择react-ts，就这样就创建完成

yarn 或yarn install（不推荐npm install 可能会报错）
看下vite-react的目录结构，熟悉的src、yarn.lock、tsconfig.json，vite.config.js是vite的配置文件，index.html是vite的入口，上面已经说过

这就体验一下：yarn dev
WO CAO～真快，确实是秒开！！！！

基础功能体验

（纯粹参考和实验官网文档所介绍的内容）

依赖解析

尽管浏览器支持esm，但浏览器无法仅仅通过’my-dep’找到依赖路径，所以需要转换：

import { someMethod } from 'my-dep'

Vite的解法是：

预构建：CommonJS / UMD 转换为 ESM 格式
导入重写为合法的 URL，例如 /node_modules/.vite/my-dep.js?v=f3sf2ebd，这样浏览器能够正确导入它们

TS支持

Vite 直接能用 .ts 文件。但是，Vite 仅执行 .ts 文件的翻译工作，不做类型检查。
这怎么办呢，按照ts：

yarn add typescript

（你可以在构建脚本中运行 tsc —noEmit，比如，package.json中”build”:”tsc —noEmit&& vite build”, ）。
另外还有一点：
Vite 使用 esbuild 将 TypeScript 翻译到 JavaScript，约是 tsc 速度的 20~30 倍。

但是， esbuild 只执行转译工作而不含类型信息，它不支持 TypeScript 的特定功能例如常量枚举和隐式 “type-only” 导入。你必须在你的 tsconfig.json 中的 compilerOptions 里设置 “isolatedModules”: true，这样 TS 才会警告你哪些功能无法与独立编译模式一同工作。

上面这段话啥意思，简单来说就是要配置 “isolatedModules”: true，否则小心线上问题。

import IA from './type'
const a: IA = {}
export { IA } // 导出了一个类型

上面的代码，如果不开这个配置，你将不会发现这里报错，所以需要留心，枚举也是一样，那就别用了？

css支持

可以使用css variable:

:root{
  --commonColor: red;
}

.my{
  color: var(--commonColor);
}

postCss集成支持

很简单，搞个postcss.config.js就好，比如这个可以编译css的时候打印log：

// in postcss.config.js
module.exports = {
  plugins:[require("@postcss-plugins/console")]
}

css-modules

命名 index.module.css，以 .module.css 为后缀名的文件会被认为是css moudule

预编译工具支持

.scss, .sass, .less, .styl 和 .stylus 文件的内置支持。直接安装就能用比如，yarn less

import资源

图片

Vite中导入一个静态资源会返回解析后的 URL

import avatarPng from './assets/yxnne_avatar.png'

// ...
<img src={avatarPng} />

json

直接可以引入

import pkg from '../package.json'
console.log('pkg', pkg)

// {name: 'vite-react', version: '0.0.0', scripts: {…}, dependencies: {…}, devDependencies: {…}}

vite中import的一些语法

返回url ```javascript //import test from ‘./test’ import test from ‘./test?url’ // 这样返回的是./test.js的路径

console.log(‘>>’, test) // >> /src/test.js


- 返回文件字符raw
```javascript
//import test from './test'
import test from './test?raw' // 这样返回的是./test.js的路径 

console.log('>>', test) // 这里是这个文件的源代码
/*

>> const a = 1

export {a}

*/

worker用于加载web worker
```
// 加载为 Web Worker
import Worker from './worker.js?worker'
```
Worker支持
worker.js: ```javascript var i = 0

function task() { i += 1 postMessage(i) setTimeout(task, 1000) }

task()

使用app.js:
```javascript
import Worker from './worker.js?worker'

const worker = new Worker()
worker.onmessage = e => {
  console.log(e.data)
}

WASM支持

https://www.assemblyscript.org/introduction.html，fib.wasm 这样得到：asc fib.ts —binaryFile fib.wasm —optimize

import init from './fib.wasm'

init({}).then(m => {
  console.log(m?.fib(10))
})

vite中使用eslint
.eslintrc.js

环境变量

参考这里
vite中使用环境变量是通过这样：import.meta.env

console.log(import.meta.env)

// 得到对象的属性：
// BASE_URL: "/"
// DEV: true
// MODE: "development"
// PROD: false
// SSR: false

除了使用这些默认的环境变量，当然可以增加自定义的env，在根目录下新建文件.env：

VITE_HI = hello

注意，自定义的环境变量必须是 VITE_ 开头的
另外，不同的模式可区别加载环境变量文件,这是根据.env文件名后缀区分，默认就不加后缀。

.env.development是在开发阶段加载，.
env.production是线上环境加载（run build出来的都是production环境）；

也可以通过添加启动参数，制定开发环境，从而加载不同的.env文件：
vite —mode test 可以去加载 .env.test

自定义环境变量没有ts提示？可以在vite.env.d.ts中声明

/// <reference types="vite/client" />

interface ImportMetaEnv {
  VITE_TITLE: string
}

以上就是简单的体验了一下vite，后续继续学习它的高级功能和原理～

⚡️初识Vite: 基本使用

概览