以下是我的vite学习笔记,感兴趣花几分钟可以简单的浏览一下。
1. 使用vite创建项目
npm init @vitejs/app
2. 基础配置
在Vite中,默认的配置如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()]
})
2.1 如何支持jsx语法?
yarn add @vitejs/plugin-vue-jsx -D
修改vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()]
})
3. 如何在Vue2中使用vite
使用underfin/vite-plugin-vue2
然后创建一个vite.config.js
,并且安装vite-plugin-vue2
import {createVueplugin} from 'vite-plugin-vue2'
export dafault {
plugins: [createVueplugin()]
}
安装vue
npm install vue@2.6.14
创建一个main.js和App.js
4. vite创建一个React项目
npm init @vitejs/app
5. 在Vite中对Css进行处理
5.1 如何使用alias别名
使用alias别名,需要在vite.config.js中添加resolve
的配置。配置如下:
export default defineConfig({
plugins: [vue(), vueJsx()],
+ resolve: {
+ alias: {
+ "@styles": "/src/styles"
+ }
+ }
})
此时就可以在页面中使用了。
import '@styles/index.css'
5.2 如何使用css预处理器
这个在vite中是天然支持的,以less
为例
只需要安装less,然后直接使用即可。
yarn add less
5.3 如何使用css module
在css的名称上,添加.module
即可。比如新建test.module.css
.moduleClass {
color: yellow;
}
然后在vue页面作用,用变量的形式classes.moduleClass
使用
import classes from '@styles/test.module.css'
export default defineComponent({
setup() {
return () => {
return <div class={`root ${classes.moduleClass}`}>Hello Vue3 Jsx</div>
}
}
})
6、vite对TypeScript的支持
在vite中,原生支持typescript。
但是在vite中只编译、不校验
。
可以使用tsc --noEmit
只做校验,不做编译输出。
"scripts": {
"build": "vue-tec --noEmit && tsc --noEmit && vite build"
},
同时,需要在根目录下,新建一个tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": [
"esnext",
"dom"
],
"types": [
"vite/client"
],
"isolatedModules": true
},
"inclide": [
"src/*.ts",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.d.ts"
]
}
同时安装下面两个插件:
"typescript": "^4.5.4",
"vue-tsc": "^0.30.2"
这样就可以正常使用Ts了。
7、vite中使用eslint和pritter
在根目录下建立.eslintrc.js
module.exports = {
extends: "standard"
}
然后安装如下依赖
yarn add eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node
7.1pritter的使用
在根目录新建.pritterrc
然后在vscode中安装pritter。
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
然后在vscode的setting中,搜索format on save,并打钩✅
再搜索formatter,选中默认的prettire作为格式化的选项
7.2使用husky对commit进行校验
yarn add husky -D
npx husky install
npx husky add .husky/pre-commit "npm run lint"
如果eslint校验不通过,则不能进行提交。
7.3解决prettire不能再方法的括号前加空格的问题
移除prettire插件,使用prettire now插件
然后在vscode的setting中,添加如下的配置:
{
"editor.defaultFormatter": "remimarsal.prettier-now",
"editor.formatOnSave": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// "prettier.spaceBeforeFunctionParen": true,
"prettier.spaceBeforeFunctionParen": true,
"prettier.semi": false,
"prettier.tabWidth": 2,
"prettier.useTabs": false,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true
}
8、vite中的环境变量配置
vite中的环境配置和vue-cli类似
在根目录下新建以.env
开头的文件,就可以通过import.meta.env
获取到对相应的变量
- .env.development: 开发环境
- .env.production: 生产环境
- .env.test: 测试环境
如果用测试环境,则需要在运行脚本后面添加 --mode test
举个🌰
"dev": "vite --mode test",
通过import.meta.env
获取的结果如下图:
需要注意的是,.env
文件中的名称都需要以VITE_
开头,比如:
VITE_TITLE=DEV
9、关于热更新
Vite中的HMR是自己实现的,不是rollup实现的。
热更新是基于一个vite实现的websocket来实现的。
HMR大致的过程是:在server端,发现了一个更新,就推送一个事件到浏览器前端,浏览器知道哪个文件更新了,就去替换老的模块。
对于Vue的热更新,在Vite中是天然支持的,并不需要手动配置。
10、global import引入一组文件
通过global import
可以批量导入一组文件
假设有一个文件夹,文件夹下有多个文件
const globModules = import.meta.glob('./glob/*')
console.log(globModules)
输出结果
获取文件中内容
Object.entries(globModules).forEach(([k, v]) => {
console.log(k + ':', v)
v().then(m=> console.log(k + ':' + m.default))
})
11、vite的预编译功能
缓存处理
对于nodemodules中安装的库,vite在第一次启动之前,会先去把这些依赖的包进行编译,缓存
起来。后面用到这些包的时候,就会从缓存
中获取。
把非es module转换成es module
在开发的时候,依赖于浏览器原生的加载方式进行加载,所以需要将非es module
转换成es module
。
零散文件处理
在vite打包的时候,会将很多零散的文件,集中到一个文件中。
12、vite常见配置项
- root: 当前项目的index
- base: 类似于webpack中的publicPath,指定请求资源的前缀
- mode: 开发模式
- pluguns: 插件的使用
- publicDir: 静态资源的目录,assets中的文件也会编译到这个文件
- cacheDir: 在node_modules/.vite中
- resolve.alias: 命名映射
- resovle.dedupe: 如果一个依赖有两个版本,这个就是用来声明使用版本的
- resolve.conditions: 对应不同的导出方式进行引入不同的文件(umd、amd...)
- resolve.extensions: 默认扩展名的列表和支持顺序
- css.modules: 设置css的modules
- css.postcss: 对postcss进行配置,类似postcss.config
- css.preprocessorOptions: 对预处理器进行进行配置,比如sass、less
- json.namedExports: 通过import引入json文件中的属性,默认开启
- json.stringify: vite把编译json的过程编译成
export default JSON.parse('...')
。这样的性能是比较高的。默认false,如果引入的json比较大,建议开启。 - esbuild: 传递给esbuild的一些配置项
- assetsInclude: 对一些特殊文件的引入支持维护,比如import txt文件
- logLevel: 控制台的输入级别,默认是
info
,打印所有的日志 - clearScreen: vite重启的时候,会把之前的打印信息隐藏
- envDir: 各种.env文件放置目录,默认在根目录
13、vite的服务相关配置
- server.host: 对服务器的IP设置,默认127.0.0.1,如果想通过你的IP地址进行访问,可以设置成0.0.0.0
- server.port: 启动端口设置,默认3000
- server.strictPort: 设置为true的时候,如果端口被占用,直接退出
- server.https: 设置成https启动,不常用
- server.open: 启动之后,自动在浏览器打开
- server.proxy: 对跨域进行代理,解决跨域问题
14、vite的build配置
- build.target: 项目支持的浏览器目标
- build.polyfillDynamicImport: 是否动态的引入polyfill
- build.outDir: 输出的文件夹
- build.assetsDir: 指定生成静态资源的存放路径
- build.assetsInlineLimit: 小于这个大小的资源,以base64形式进行编码
- build.cssCodeSplit: 对css文件进行拆分,如果禁用,这个项目只有一个css文件
- build.sourceMap: 源文件映射,方便调试
- build.rollupOptions: 把options传给rollup
- build.commonjsOptions: 同上
- build.lib: 导出的是库模式,不是应用的模式
- build.manifest: 生成一个manifest文件。
- build.emptyOutDir: 构建的时候,是否主动清空目录
- build.chunkSizeWarningLimit: 如果打包的文件超过500k,就会给一个警告
- build.watch: 文件变化是否重新编译