viteVite是一个web开发构建工具。vite是法语中"fast"的意思/vit/。开发过程中通过本机ES模块导入为

vite是什么？

Vite是一个web开发构建工具。vite是法语中"fast"的意思/vit/。开发过程中通过本机ES模块导入为coding服务，并通过rollup用于生产。

闪电般快速的冷服务器启动
即时热模块更换（HMR）
真正的按需编译

快？举两个🌰

1、打包速度

2、启动速度

How and Why

主要区别在于Vite在开发过程中没有打包，ES 模块源码直接传输给浏览器，浏览器使用自带的 <script module> 进行解析支持，并对每次导入进行HTTP请求。

开发服务器拦截请求，并在必要时执行代码转换。

现在能用于生产吗？

仍处于实验阶段，但打算使其适合生产。

如何构建一个项目？

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

特征

裸模块解析
可以快速使用Vue原型无需本地安装。

热模块更换
自带HMR开箱即用。
模块还可以接受直接依赖项的更新，而无需重新加载自身：

import { foo } from './foo.js'
foo()
if (import.meta.hot) {
import.meta.hot.acceptDeps('./foo.js', (newFoo) => {
    newFoo.foo()
})
// 接收数组
import.meta.hot.acceptDeps(['./foo.js', './bar.js'],     ([newFooModule, newBarModule]) => {
    // ...
})
}

完整API文档

TypeScript
支持引入.ts文件和<script lang="ts">。
Vite使用esbuild将TypeScript转换为JavaScript，这比vanilla快20到30倍tsc，并且HMR更新可以在50毫秒内反映在浏览器中。
CSS / JSON Importing
URL资产处理
支持绝对路径和相对路径
PostCSS
CSS模块
CSS预处理器
建议使用现代CSS语法。
JSX语法
自定义块
配置文件
创建一个vite.config.js或vite.config.ts文件，或者指定配置文件vite --config my-config.js。请参阅config.t3

开发服务器代理

// vite.config.js
module.expor = {
  proxy: {
    '/foo': 'http://localhost:4567/foo',
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}

生产构建

模式和环境变量

process.env.NODE_ENV
默认情况下，有两种模式：development和production

API

开发服务器

可以通过API自定义服务器。

const { createServer } = require('vite')

const myPlugin = ({
  root, // 项目根目录，绝对路径
  app, // 实例
  server, // 原始HTTP服务器实例
  watcher // 文件观察者实例
}) => {
  app.use(async (ctx, next) => {
    if (ctx.path.endsWith('.scss')) {
      console.log('pre processing: ', ctx.url)
      ctx.type = 'css'
      ctx.body = 'body { border: 1px solid red }'
    }

    // 等待vite进行内置转换
    await next()
      
    if (ctx.response.is('js')) {
      console.log('post processing: ', ctx.url)
      console.log(ctx.body)
    }
  })
}

createServer({
  configureServer: [myPlugin]
}).listen(3000)

构建

完整配置文件

const { build } = require('vite')

(async () => {
  const result = await build({
    rollupInputOptions: {},
    rollupOutputOptions: {},
    rollupPluginVueOptions: {}
  })
})()