Vite 的工作原理
- 基于原生
ES
模块,使用Rollup
打包 - 浏览器支持:支持原生
ES
模块module import
的浏览器均可使用
无侵入的使用 Vite
历史项目中完全抛弃 webpack
转投 Vite
不太现实
-
Vite
的生态还不够成熟 - 改造成本太大
故只在开发环境使用 Vite
以提高开发效率(当然还是支持 webpack
开发的,这里只是新增了一种开发工具,不破坏原有项目的架构)
接入流程( Node.js >= 12.0.0 )
- 相关依赖安装
pnpm i vite vite-plugin-vue2 @originjs/vite-plugin-commonjs -D
- 手动创建
vite.config.js
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
build: {
sourcemap: false,
},
plugins: [
createVuePlugin({
vueTemplateOptions: {},
}),
viteCommonjs({
// 排除需要转换的依赖:例如 lodash
exclude: ['lodash'],
}),
],
resolve: {
extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
'@': resolve('src'),
},
},
server: {
host: '0.0.0.0',
port: 8080,
proxy: {},
},
})
- 根目录创建
index.html
index.html
与项目根目录
你可能已经注意到,在一个 Vite 项目中,index.html
在项目最外层而不是在 public
文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html
是该 Vite
项目的入口文件。
Vite
将 index.html
视为源码和模块图的一部分。Vite
解析 <script type="module" src="...">
,这个标签指向你的 JavaScript
源码。甚至内联引入 JavaScript
的 <script type="module" src="...">
和引用 CSS
的 <link href>
也能利用 Vite
特有的功能被解析。另外,index.html
中的 URL 将被自动转换,因此不再需要 %PUBLIC_URL%
占位符了。
与静态 HTTP
服务器类似,Vite
也有 “根目录” 的概念,即文件被提供的位置。你会看到它在整个文档中用 <root>
表示。源码中的绝对 URL
路径将以项目的 “根” 作为基础来解析,因此你可以像在普通的静态文件服务器上一样编写代码(并且功能更强大!)。Vite
还能够处理依赖关系,解析处于根目录外的文件位置,这使得它即使在基于 monorepo
的方案中也十分有用。
Vite
也支持多个 .html
作入口点的 多页面应用模式。
- 通过
module import
的方式引入项目入口文件
<script type="module" src="/src/main.js"></script>
注意在 Vite
目录架构中,.html
中不可出现模板语法
- 自定义脚本命令
/* package.json */
"dev-vite": "vite"
踩坑总结
-
Vite
只支持ES
规范,不支持CommonJS
规范,故项目中必须使用module import
模块化语法(@originjs/vite-plugin-commonjs
依赖可实现兼容CommonJS
) -
@originjs/vite-plugin-commonjs
依赖只可实现兼容CommonJS
模块化语法,但是不能添加require
类 - 对于
Vue
项目,Vite
不支持基于Vue render
的jsx/tsx
语法(可借用Babel
或将组件改为.vue
) -
Vite
生态不支持任何webpack
插件以及插件链式调用的方式