Vite

官网：https://cn.vitejs.dev/ (opens new window)

1. Vite 快速入门

Vite 概念和设计思想

• Vite 是一种新型前端构建工具。
• Vite 由两部分组成：一个开发服务，服务于开发环境，ESM + HMR；一套构建指令，服务于生产环境，用 Rollup 打包。
• Vite 将模块区分为依赖和源码两类，提升开发服务启动时间。【1】依赖：在开发时不会变动的纯 JavaScript，Vite 会使用 esbuild 预构建依赖；【2】源码：通常为 JSX、CSS 或者 Vue SFC 等，时常会被编辑，需要转换，基于路由拆分。Vite 以原生 ESM 方式提供源码，让浏览器接管打包工作。
• 什么是打包：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
• 常用的前端打包构建工具：Webpack、Rollup、Parcel、Gulp。缺点：缓慢的服务启动；缓慢的更新。
• esm 加载：lodash-es。
• { ...{}, test: 'test' } / [ ...[], { test: 'demo' } ]。

vite.config.js

• 别名配置的更改。
• 关闭打包计算：brotliSize: false。
• 插件依赖：unplugin-vue-components、unplugin-auto-import。

2. Vite

• vite 是个啥：vite 是一个开发构建工具，开发过程中它利用浏览器 native ES Module 特性导入组织代码，生产中利用rollup 作为打包工具，它有如下特点：光速启动、热模块替换、按需编译。

// vite.config.js

// 安装 vite：npm init vite-app <project-name>

// CSS Module

// PostCSS：【1】配置 postcss.config.js；【2】npm i postcss autoprefixer@8.1.4

// 代码规范 eslint：借助 eslint 规范项目代码，通过 prettier 做代码格式化
// 配置 lint 规则，.eslintrc.js
// 有必要还可以配置 prettier.config.js 修改 prettier 的默认格式化规则
"devDependencies": {
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "prettier": "^1.19.1"
}

// 测试环境：利用 jes t和 @vue/test-utils 测试组件
// 配置 babel.config.js
// 配置 jest.config.js
// 将lint、test 和 git 挂钩
"jest": "^24.0.0",
"vue-jest": "^5.0.0-alpha.3",
"babel-jest": "^26.1.0",
"@babel/preset-env": "^7.10.4",
"@vue/test-utils": "^2.0.0-beta.9"
// lint 配置添加 jest 环境
module.exports = {
  env: {
    jest: true
  },
}

// typescript 整合：vite 可直接导入.ts 文件，在 SFC 中通过 <script lang="ts"> 使用
// ts 版本指定：package.json
// ts 参考配置：tsconfig.json

// 定义别名：优雅且不易出错
alias: {
  "@": path.resolve(__dirname, "src"),
  "comps": path.resolve(__dirname, "src/components"),
}

// 代理：配置服务器代理
proxy: {
  '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    rewrite: path => path.replace(/^\/api/, '')
  }
}

// 数据 mock
npm i mockjs -S
npm i vite-plugin-mock cross-env -D
// 引入插件，vite.config.js
plugins: [
  createMockServer({
    // close support .ts file
    supportTs: false,
  }),
]
// 设置环境变量，package.json
"dev": "cross-env NODE_ENV=development vite"
    
// gzip 压缩
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins:[
    ...,
    viteCompression({
      // 生成压缩包 gz
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ]
})