【vite学习笔记】Vite构建项目搭建和基本配置

1,330 阅读6分钟

以下是我的vite学习笔记,感兴趣花几分钟可以简单的浏览一下。

1. 使用vite创建项目

npm init @vitejs/app

image.png

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

github地址

image.png

然后创建一个vite.config.js,并且安装vite-plugin-vue2

image.png

import {createVueplugin} from 'vite-plugin-vue2'
export dafault {
    plugins: [createVueplugin()]
}

安装vue npm install vue@2.6.14

image.png

创建一个main.js和App.js

image.png

4. vite创建一个React项目

npm init @vitejs/app

image.png

image.png

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,并打钩✅

image.png

再搜索formatter,选中默认的prettire作为格式化的选项

image.png

7.2使用husky对commit进行校验

yarn add husky -D

npx husky install

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

如果eslint校验不通过,则不能进行提交。

image.png

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获取的结果如下图:

image.png

需要注意的是,.env文件中的名称都需要以VITE_开头,比如:

VITE_TITLE=DEV

9、关于热更新

Vite中的HMR是自己实现的,不是rollup实现的。

热更新是基于一个vite实现的websocket来实现的。

image.png

HMR大致的过程是:在server端,发现了一个更新,就推送一个事件到浏览器前端,浏览器知道哪个文件更新了,就去替换老的模块。

对于Vue的热更新,在Vite中是天然支持的,并不需要手动配置。

10、global import引入一组文件

通过global import可以批量导入一组文件

假设有一个文件夹,文件夹下有多个文件

const globModules = import.meta.glob('./glob/*')
console.log(globModules)

输出结果

image.png

获取文件中内容

Object.entries(globModules).forEach(([k, v]) => {
    console.log(k + ':', v)
    v().then(m=> console.log(k + ':' + m.default))
})

image.png

11、vite的预编译功能

缓存处理

对于nodemodules中安装的库,vite在第一次启动之前,会先去把这些依赖的包进行编译,缓存起来。后面用到这些包的时候,就会从缓存中获取。

image.png

把非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: 文件变化是否重新编译