初识vite基础知识# 初识 Vite 基础知识
vite 特点：
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
vite 主要特点是基于浏览器 native 的 ES module (opens new window) 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可。
vite 开发环境利用浏览器的 import 机制，打包时也有内置的 rollup ，所以可以直接使用。
这里主要还是了解一下
rollup和webpack的区别，rollup的模块打包能力并没有webpack强大，但是利用了tree-shaking充分处理js文件，打包出来的js文件会比较 “干净”。
# Vite使用
$ npm create vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
2
3
4
npm create其实就是npm init命令，而npm init命令带上包名执行的就是npm exec，也就是执行vite包的默认命令 ——初始化。
Vite项目结构树
➜ vite-app tree
.
├── index.html // 页面入口,注意是在项目最外层
├── vite.config.js // 配置文件
├── package.json
├── public
│ └── favicon.ico
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── index.css
└── main.js
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Vite 解决了 Webpack 哪些问题
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）
Vue 脚手架工具 vue-cli 使用 webpack 进行打包，开发时可以启动本地开发服务器，实时预览。因为需要对整个项目文件进行打包，开发服务器启动缓慢。
而对于开发时文件修改后的热更新 HMR 也存在同样的问题。Webpack 的热更新会以当前修改的文件为入口重新 build 打包，所有涉及到的依赖也都会被重新加载一次。
Vite 则很好地解决了上面的两个问题。
# 打包问题
vite 只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理，实现真正的按需加载。
# plugin
vite 背后的原理都在 plugin 里。
plugin大致分类如下
- 用户注入的 plugins —— 自定义 plugin
- hmrPlugin —— 处理 hmr
- htmlRewritePlugin —— 重写 html 内的 script 内容
- moduleRewritePlugin —— 重写模块中的 import 导入
- moduleResolvePlugin ——获取模块内容
- vuePlugin —— 处理 vue 单文件组件
- esbuildPlugin —— 使用 esbuild 处理资源
- assetPathPlugin —— 处理静态资源
- serveStaticPlugin —— 托管静态资源
- cssPlugin —— 处理 css/less/sass 等引用
接下来看看 plugin 的实现方式，开发一个用来拦截 json 文件 plugin 可以这么实现
interface ServerPluginContext {
root: string
app: Koa
server: Server
watcher: HMRWatcher
resolver: InternalResolver
config: ServerConfig
}
type ServerPlugin = （ctx:ServerPluginContext）=> void;
const JsonInterceptPlugin:ServerPlugin = ({app})=>{
app.use(async (ctx, next) => {
await next()
if(ctx.path.endsWith('.json') && ctx.body) {
ctx.type = 'js'
ctx.body = 'export default json'
}
})
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 环境变量
# 环境变量 (opens new window)
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量：
import.meta.env.MODE: {string} 应用运行的模式 (opens new window)。import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base配置项 (opens new window)决定。import.meta.env.PROD: {boolean} 应用是否运行在生产环境。import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)。import.meta.env.SSR: {boolean} 应用是否运行在 server (opens new window) 上。
# .env文件
Vite 使用 dotenv (opens new window) 从你的 环境目录 (opens new window) 中的下列文件加载额外的环境变量：
.env # 所有情况下都会加载
.env.local # 所有情况下都会加载，但会被 git 忽略
.env.[mode] # 只在指定模式下加载 (‘development 或者 production)
.env.[mode].local # 只在指定模式下加载，但会被 git 忽略
2
3
4
常见的后缀：
.env # 所有环境都会加载
.env.development # 开发环境
.env.production # 生产环境
2
3
自定义环境变量:
注意：必须以 VITE_ 为前缀才会生效
// 如：
VITE_SOME_KEY=123
VITE_BASE_URL=https://www.baidu.com
2
3
获取环境变量：
console.log(import.meta.env.VITE_BASE_URL)
在 HTML 中使用：
Vite 还支持在 HTML 文件中替换环境变量。import.meta.env 中的任何属性都可以通过特殊的 %ENV_NAME% 语法在 HTML 文件中使用：
<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>
2