vite配置-基础篇

写在前面的话：作者最近正在学习vite配置，各种小的碎的知识点扑面而来。俗话说，好记性不如烂笔头，那就记一记。有错误的地方欢迎指正👏

vite为什么这么快？

1、传统的工具vue-cli、create-react-app启动项目时就要从入口文件开始把所有的文件编译成bundle。而vite在启动的时候只做了需要的文件的编译，等到真正去访问特定route的时候，才根据需求编译文件，作者称之为懒编译。

2、vite使用了esbuild的工具，在运行开发环境的的时候，使用esbuild来编译，它的性能比webpack、rollup都要高，具体可以查看下esbuild官网对比图表。

CSS配置

对css modules、css variables的支持

vite对css variables、css modules、有良好的支持，可以在项目中直接使用。

对pre-processor的支持

使用css pre-processors，直接安装对应的包即可如使用sass，npm install less -D，安装依赖即可使用

对postcss的支持

在项目根目录创建postcss.config.js，配置自己需要plugins，即可使用如配置autoprefixer

在postcss.config.js中配置

安装依赖

js 复制代码

    npm install autoprefixer -D // vite内置了postcss依赖，不需要再装postcss

js 复制代码

   module.exports = {
      plugins: [
          require('autoprefixer')({
                 overrideBrowserslist: [
                    'Android 4.1',
                    'iOS 7.1',
                    'Chrome > 31',
                    'ff > 31',
                    'ie >= 8',
                    'last 10 versions', // 所有主流浏览器最近10版本用
                ],
                grid: true,
          })
      ],
    }

或在vite.config.ts中配置

js 复制代码

import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({// 启用 autoprefixer
            overrideBrowserslist: [
                    'Android 4.1',
                    'iOS 7.1',
                    'Chrome > 31',
                    'ff > 31',
                    'ie >= 8',
                    'last 10 versions', // 所有主流浏览器最近10版本用
            ],
            grid: true,
        }) 
      ]
    }
  }
});

效果：

css 复制代码

// 编译前
@bgColor: red;

.root {
  background-color: @bgColor;
  display: flex;
  transform: translateY(100px);
}

// 编译后
.root {
    background-color: red;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
}

一些常用postcss插件

autoprefixer: 自动添加浏览器前缀，如-webkit-,-moz-
postcss-preset-env: 使用自定义属性、嵌套等
cssnano: 移除注释、空白字符、重复代码
stylelint：css代码错误检查和规范
postcss-import：支持@import

TS集成

vite原本支持ts语法，但只编译不校验。只是将ts语法编译成js，给浏览器加载我们可以在dev命令行中加入tsc --noEmit,只做类型检查而不生成对应的js或.d.ts文件在根目录创建 tsconfig.json, tsc命令会根据该文件规则来校验

简单版tsconfig.json

js 复制代码

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext", //esmodule vite开发环境模块加载js模块必须使用esmodule加载
    "moduleResolution": "node", //使用node解析模块
    "strict": true,
    "jsx": "preserve", //ts不编译jsx语法，留给项目里vue-jsx插件去编译
    "sourceMap": true, // 开启浏览器可以直接调试ts代码
    "resolveJsonModule": true, //是否可以直接import json
    "esModuleInterop": true, // import react from 'react';不开启就要import * as react from 'react'
    "lib": ["esnext", "DOM"], //支持的内置module
    "types": ["vite/client"], // 引入包自带的类型定义文件
    "isolatedModules": true // 独立编译；避免隐式依赖；提高兼容性（在非ts环境如babel中也能正确编译
  },

  "exclude": ["node_modules"],
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

其中"types": ["vite/client"]的引入，方便ts对特定类型的识别，如import静态文件，env环境变量，HMR API

静态资源处理

vite提供了以下的文件引入： url、raw、worker/worker inline、json、webassembly(www.assemblyscript.org/)

如我们创建一个test.ts文件，不同的引入方式可以获取不同的内容

js 复制代码

import test from './test?url'  // ?url 返回文件路径
import test from './test?raw' // ?raw 文件代码以字符串的形式引用
import worker / worker inline  
// WebWorker帮助我们构建更高性能的工具，将计算量很大的进程放到一个线程

Eslint和Prettier

vite在开发过程中，编译时是不会做eslint校验的，保证开发效率

husky 尝试提交代码，husky 会自动运行 npm run lint。如果 lint 检查失败，提交会被阻止

terminal 复制代码

npm install husky --save-dev
npx husky init
npx husky add .husky/pre-commit "npm test"
npx husky add .husky/pre-commit "npm run lint"

.eslintrc.js

js 复制代码

module.exports = {
  extends: 'standard',
  globals: {
    postMessage: true,
  },
  rules: {
    'space-before-function-paren': 'off',
  },
}

.prettierrc

js 复制代码

{
  "semi": false,
  "singleQuote": true
}

环境变量

vite内置环境变量：MODE、BASE_URL、PROD、DEV 也可以自定义环境变量：VITE_开头也可以在根目录创建匹配不同的环境 .env.development .env.production .env.development.local

写完了，，好长。我会再来复习的！