前言

由于對vite的喜愛，所以本人首次嘗試英文文檔的翻譯，由于本人英文水平有限。如果有哪里翻譯錯(cuò)誤或是無法get到原文的準(zhǔn)確意思請指出會(huì)及時(shí)修正。為了更好的閱讀體驗(yàn)強(qiáng)烈推薦跳轉(zhuǎn)到下方地址進(jìn)行閱讀。

https://github.com/zhangyuang/vite-design?github.comhttps://vite-design.surge.sh/guide/chinese-doc.html?vite-design.surge.sh

vite ?

Vite 是一個(gè)有態(tài)度的 web 開發(fā)構(gòu)建工具，在本地開發(fā)時(shí)使用原生的 ES Module 特性導(dǎo)入你的代碼。在生產(chǎn)環(huán)境使用 Rollup 打包代碼。

• 更快的冷啟動(dòng)速度
• 即時(shí)的熱替換功能
• 真正的按需編譯
• 更多詳細(xì)信息請查看How and Why

狀態(tài)

目前在beta階段, 預(yù)計(jì)很快發(fā)布1.0版本。

快速開始

對于 Vue 用戶來說: Vite 目前僅支持 Vue 3.x. 這意味著你不能使用尚未與 Vue 3 兼容的庫$ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev

如果你使用yarn:

$ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev雖然 Vite 主要是為了與 Vue 3 一起工作而設(shè)計(jì)的, 但它同時(shí)也能很好的支持其他框架。例如, 你可以嘗試 npm init vite-app --template react 或者 --template preact.

使用 master 分支

如果你迫不及待的想要測試最新的特性，克隆 vite 到本地并且執(zhí)行以下命令:

yarn yarn build yarn link

然后進(jìn)入基于 vite 創(chuàng)建的項(xiàng)目并且執(zhí)行 yarn link vite。 現(xiàn)在可以重啟你的服務(wù) (yarn dev) 去體驗(yàn)最新的特性！

Browser Support

Vite 在開發(fā)環(huán)境下依賴原生ES module imports。在生產(chǎn)環(huán)境構(gòu)建時(shí)依賴動(dòng)態(tài)加載實(shí)現(xiàn)代碼分割 (polyfill參考polyfilled)

Vite 假設(shè)你的代碼運(yùn)行在現(xiàn)代瀏覽器上，默認(rèn)將會(huì)使用 es2019 規(guī)范來轉(zhuǎn)換你的代碼。(這使得可選鏈功能在代碼壓縮后能被使用)。同時(shí)你能夠手動(dòng)的在配置選項(xiàng)中指定構(gòu)建目標(biāo)版本。最低的版本規(guī)范是 es2015。

功能

• Bare Module Resolving
• Hot Module Replacement
• TypeScript
• CSS / JSON Importing
• Asset URL Handling
• PostCSS
• CSS Modules
• CSS Pre-processors
• JSX
• Web Assembly
• Inline Web Workers
• Custom Blocks
• Config File
• HTTPS/2
• Dev Server Proxy
• Production Build
• Modes and Environment Variables

Vite 盡可能的嘗試復(fù)用 vue-cli 的默認(rèn)配置。如果你之前使用過 vue-cli 或者其他基于 Webpack 的模版項(xiàng)目，你應(yīng)該會(huì)非常熟悉這些。這意味著不要期望在這里和那里會(huì)有什么不同。

Bare Module Resolving

原生的 ES imports 規(guī)范不支持裸模塊的導(dǎo)入，例如

import { createApp } from 'vue'

這種寫法默認(rèn)將會(huì)拋出錯(cuò)誤。Vite 會(huì)檢測到當(dāng)前服務(wù)中的所有 .js 文件，并且重寫他們的路徑例如 /@modules/vue。 在這種路徑下，Vite 將會(huì)從你安裝的依賴中正確的解析執(zhí)行模塊。

對于 vue 這個(gè)依賴則有著特殊的處理。如果你沒有在項(xiàng)目的本地依賴中安裝，Vite 將會(huì)回退到它自身的依賴版本。這意味著如果你全局安裝了 Vite, 它將更快的找到 Vue 實(shí)例而不需要在本地安裝依賴。

Hot Module Replacement

• vue react 以及 preact 模版已經(jīng)在 create-vite-app 集成了熱替換功能可以開箱即用
• 為了手動(dòng)的控制熱替換功能, 可以使用該 API import.meta.hot.

如果模塊想要接收到自身替換回調(diào), 可以使用 import.meta.hot.accept:

```js

export const count = 1

// 這個(gè)條件判斷使得熱替換相關(guān)的代碼將會(huì)在生產(chǎn)環(huán)境被丟棄

if (import.meta.hot) { import.meta.hot.accept((newModule) => { console.log('updated: count is now ', newModule.count) }) } ```

一個(gè)模塊同樣能夠接收到來自其他模塊的更新通知而不需要重新加載。可以使用 import.meta.hot.acceptDeps：

```js

import { foo } from './foo.js'

foo()

if (import.meta.hot) { import.meta.hot.acceptDeps('./foo.js', (newFoo) => { // 回調(diào)函數(shù)將會(huì)在 './foo.js' 被更新時(shí)觸發(fā) newFoo.foo() })

// 同樣我們可以接受一個(gè)數(shù)組 import.meta.hot.acceptDeps(['./foo.js', './bar.js'], ([newFooModule, newBarModule]) => {// 回調(diào)函數(shù)將會(huì)在這個(gè)數(shù)組中的模塊被更新時(shí)觸發(fā) })

}

```

接收自身更新通知的模塊或者接收來自其他模塊更新通知的模塊可以使用 hot.dispose 來清理一些更新過程中產(chǎn)生的副作用

```js

function setupSideEffect() {}

setupSideEffect()

if (import.meta.hot) { import.meta.hot.dispose((data) => { // cleanup side effect }) }

```

完整的API可以查看 hmr.d.ts.

Vite 的熱替換功能并不會(huì)交換導(dǎo)入的模塊來源。如果一個(gè)被接收的模塊被重復(fù)的導(dǎo)出了，它有責(zé)任去更新這些重復(fù)的導(dǎo)出(這些導(dǎo)出必須使用 let)。另外，接收模塊的上游將不會(huì)被通知這些變化。(這塊嘗試寫了一些事例驗(yàn)證但是還是無法get到原文想表達(dá)的準(zhǔn)確意思)

這個(gè)簡潔的的熱替換實(shí)現(xiàn)在很多開發(fā)場景是足夠用的。這使得我們可以跳過昂貴的生成代理模塊的過程。

TypeScript

Vite 支持在Vue 單文件組件中使用 <script lang="ts"> 導(dǎo)入 .ts 文件。

Vite 只進(jìn)行 .ts 文件的轉(zhuǎn)換而不會(huì)進(jìn)行類型檢查。它假設(shè)類型檢查已經(jīng)在你的 IDE 或者在構(gòu)建命令中已經(jīng)被加入進(jìn)來了(例如你可以在構(gòu)建腳本中執(zhí)行 tsc --noEmit)。

Vite 使用 esbuild 來轉(zhuǎn)換 TypeScript 到 JavaScript 速度相比 tsc 快 20-30倍。 熱替換的更新時(shí)間在瀏覽器中將小于50ms。

因?yàn)?esbuild 僅進(jìn)行轉(zhuǎn)換不附帶類型信息。所以它不支持以下功能例如常量枚舉以及隱式的類型導(dǎo)入。你必須在 tsconfig.json 文件的 compilerOptions 選項(xiàng)中設(shè)置 "isolatedModules": true, 這樣 TS 將會(huì)警告你這些功能在這個(gè)選項(xiàng)下不能被使用。

CSS / JSON Importing

You can directly import .css and .json files from JavaScript (including <script> tags of *.vue files, of course).

• .json 文件的內(nèi)容將會(huì)以默認(rèn)導(dǎo)出的形式導(dǎo)出一個(gè)對象
• .css 文件將不會(huì)導(dǎo)出任何東西除非它是以 .module.css 作為后綴名。(查看 CSS Modules)。 在開發(fā)環(huán)境下導(dǎo)入它會(huì)產(chǎn)生副作用并且注入到頁面當(dāng)中，在生產(chǎn)環(huán)境最終會(huì)單獨(dú)打包為 style.css 文件。

CSS 和 JSON 的導(dǎo)入都支持熱替換功能。

Asset URL Handling

你可以在 *.vue 模版 styles 標(biāo)簽以及 .css 文件中引用靜態(tài)資源，通過絕對的靜態(tài)目錄路徑(基于你的項(xiàng)目根目錄) 或者相對路徑 (基于當(dāng)前文件)。后者的行為與你之前在 vue-cli 或者webpack的 file-loader 的使用方式非常像。

所有被引用的資源包括使用絕對路徑引用的資源最終都會(huì)被復(fù)制到打包后的 dist 文件夾當(dāng)中并且文件名包含 has h值, 沒有被引用的文件將不會(huì)被復(fù)制。與 vue-cli 一樣，小于 4kb 的圖片資源將會(huì)以 base64 的形式內(nèi)聯(lián)。

所有的靜態(tài)資源路徑引用，包括絕對路徑都是基于你當(dāng)前的工作目錄結(jié)構(gòu)。

The public Directory

項(xiàng)目工程下的 public 目錄提供不會(huì)在源碼中引入靜態(tài)文件資源文件(例如 robots.txt), 或者必須保留原始名稱的文件(不附帶 hash 值)。

public 目錄中的文件將會(huì)被復(fù)制到最終的 dist 文件夾當(dāng)中。

如果要引用 public 中的文件需要使用絕對路徑，例如 public/icon.png 文件在源碼中的引用方式為 /icon.png。

Public Base Path

如果你的項(xiàng)目以嵌套文件夾的形式發(fā)布。可以使用 --base=/your/public/path/ 選項(xiàng)，這樣所有的靜態(tài)資源的路徑會(huì)被自動(dòng)重寫。

為了動(dòng)態(tài)的路徑引用，這里有兩種方式提供

• 你可以獲得解析后的靜態(tài)文件路徑通過在 JavaScript 中 導(dǎo)入不它們。例如 import path from './foo.png' 將會(huì)以字符串的形式返回加載路徑。
• 如果你需要在云端拼接完整的路徑，可以使用注入的全局變量 import.meta.env.BASE_URL 它的值等于靜態(tài)資源的基路徑。這個(gè)變量在構(gòu)建過程中是靜態(tài)的，所以它必須以這種方式出現(xiàn)。 (import.meta.env['BASE_URL'] 將不會(huì)生效)

PostCSS

Vite 將自動(dòng)的在 *.vue 文件中的所有 styles 標(biāo)簽 以及所有導(dǎo)入的 .css 文件中應(yīng)用 PostCSS。只需要安裝必要的插件并且在項(xiàng)目根目錄下添加 postcss.config.js 配置文件。

CSS Modules

如果你想使用 CSS Modules 你并不需要配置 PostCSS，因?yàn)檫@已經(jīng)集成好是開箱即用的。在 *.vue 組件中你可以使用 <stype module>, 在 .css 文件中你可以使用 *.module.css 的后綴名便可以以帶有 hash 值的形式來導(dǎo)入它們。

CSS Pre-Processors

因?yàn)?Vite 期望你的代碼將會(huì)運(yùn)行在現(xiàn)代瀏覽器中，所以它建議使用原生的 CSS 變量結(jié)合 PostCSS 插件來實(shí)現(xiàn) CSSWG 草案 (例如 postcss-nesting) 使其變得簡潔以及標(biāo)準(zhǔn)化。這意味著，如果你堅(jiān)持要使用 CSS 預(yù)處理，你需要在本地安裝預(yù)處理器然后使用。

yarn add -D sass <style lang="scss"> /* use scss */ </style>

同樣也可以在 JS 文件中導(dǎo)入

import './style.scss'

Passing Options to Pre-Processor

要求版本大于等于 1.0.0-beta.9+ 如果你需要修改默認(rèn)預(yù)處理器的配置，你可以使用 config 文件中的 cssPreprocessOptions 選項(xiàng)(查看 Config File) 例如為你的 less 文件定義一個(gè)全局變量// vite.config.js module.exports = {cssPreprocessOptions: {less: {modifyVars: {'preprocess-custom-color': 'green'}}} }

JSX

.jsx and .tsx files are also supported. JSX transpilation is also handled via esbuild.

.jsx 以及 .tsx files 同樣是支持的。 JSX 文件同樣使用 esbuild 來進(jìn)行轉(zhuǎn)換。

默認(rèn)與 Vue3 結(jié)合的 JSX 配置是開箱即用的 (對 Vue 來說目前還沒有針對 JSX 語法的熱替換功能)

import { createApp } from 'vue'function App() {return <Child>{() => 'bar'}</Child> }function Child(_, { slots }) {return <div onClick={() => console.log('hello')}>{slots.default()}</div> }createApp(App).mount('#app')

同時(shí)這種寫法將會(huì)自動(dòng)導(dǎo)入與 jsx 兼容的函數(shù)，esbuild 將會(huì)轉(zhuǎn)換 JSX 使其成為與 Vue 3 兼容并且能夠在虛擬節(jié)點(diǎn)中被調(diào)用。Vue 3 最終將提供可利用Vue 3的運(yùn)行時(shí)快速的自定義JSX轉(zhuǎn)換。

JSX with React/Preact

我們準(zhǔn)備了兩種方案分別是 react 和 preact。你可以使用 Vite 執(zhí)行下列命令來進(jìn)行方案的選擇使用 --jsx react or --jsx preact。

如果你需要一個(gè)自定義的 JSX 編譯規(guī)則，JSX 支持自定義通過在 CLI 中使用 --jsx-factory 以及 --jsx-fragment 標(biāo)志。或者使用 API 提供的 jsx: { factory, fragment }。例如你可執(zhí)行 vite --jsx-factory=h 來使用 h 作為 JSX 元素被創(chuàng)建時(shí)候的函數(shù)調(diào)用。在配置文件中 (參考 Config File), 可以通過下面的寫法來指定。

// vite.config.js module.exports = {jsx: {factory: 'h',fragment: 'Fragment'} }

在使用 Preact 作為預(yù)置的場景下， h 已經(jīng)自動(dòng)注入在上下文當(dāng)中，不需要手動(dòng)的導(dǎo)入。然而這會(huì)導(dǎo)致在使用 .tsx 結(jié)合 Preact 的情況下 TS 為了類型推斷期望 h 函數(shù)能夠被顯示的導(dǎo)入。在這種情況下，你可以顯示的指定 factory 配置來禁止 h 函數(shù)的自動(dòng)注入。

Web Assembly

1.0.0-beta.3+

預(yù)編譯的 .wasm 文件能夠被直接導(dǎo)入。默認(rèn)的導(dǎo)出會(huì)作為初始化函數(shù)返回一個(gè) Promise 對象來導(dǎo)出 wasm 實(shí)例對象:

import init from './example.wasm'init().then(exports => {exports.test() })

init 函數(shù)也能夠獲取到 imports 對象作為 WebAssembly.instantiate 的第二個(gè)參數(shù)傳遞。

init({imports: {someFunc: () => { /* ... */ }} }).then(() => { /* ... */ })

在生產(chǎn)環(huán)境構(gòu)建時(shí)，小于 assetInlineLimit 大小限制的 .wasm 文件將會(huì)以 base64 的形式內(nèi)聯(lián)。否則將會(huì)復(fù)制到 dist 文件夾作為靜態(tài)資源被獲取。

Inline Web Workers

1.0.0-beta.3+

web worker 腳本能夠被直接導(dǎo)入只需要在后面加上 ?workder。默認(rèn)的導(dǎo)出是一個(gè)自定義的 workder 構(gòu)造函數(shù)。

import MyWorker from './worker?worker'const worker = new MyWorker()

在生產(chǎn)環(huán)境構(gòu)建時(shí)，workders 將會(huì)以 base64 的形式內(nèi)聯(lián)。

worker 腳本同樣使用 import 而不是 importScripts()，在開發(fā)環(huán)境下這依賴于瀏覽器的原生支持，并且僅在 Chrome 中能夠工作，但是生產(chǎn)環(huán)境已經(jīng)被編譯過了。

如果你不希望內(nèi)聯(lián) worker 腳本，你可以替換你的 workder 腳本到 public 文件夾，然后初始化 workder 例如 new Worker('/worker.js')

Config File

你可以在當(dāng)前項(xiàng)目中創(chuàng)建一個(gè) vite.config.js 或者 vite.config.ts 文件。Vite 將會(huì)自動(dòng)的使用它。你也可以通過 vite --config my-config.js 顯式的指定配置文件。

除了在 CLI 映射的選項(xiàng)之外，它也支持 alias, transfroms, plugins (將作為配置接口的子集)選項(xiàng)。在文檔完善之前參考 config.ts 來獲得更全面的信息。

Custom Blocks

自定義區(qū)塊 在 Vue 的單文件組件中也是支持的。可以通過 vueCustomBlockTransforms 選項(xiàng)來指定自定義區(qū)塊的轉(zhuǎn)換規(guī)則:

// vite.config.js module.exports = {vueCustomBlockTransforms: {i18n: ({ code }) => {// return transformed code}} }

HTTPS/2

通過 --https 的方式來啟動(dòng)服務(wù)將會(huì)自動(dòng)生成自簽名的證書。并且服務(wù)將會(huì)啟用 TLS 以及 HTTP/2。

同樣可以通過 httpsOptions 選項(xiàng)來自定義簽名證書。與 Node 的 https.ServerOptions 一樣支持接收以下參數(shù) key, cert, ca, pfx。

Dev Server Proxy

你可以使用配置文件中的 proxy 選項(xiàng)來自定義本地開發(fā)服務(wù)的代理功能。Vite 使用 koa-proxies](https://github.com/vagusX/koa-proxies), 它底層使用了http-proxy。鍵名可以是一個(gè)路徑，更多的配置可以查看 here。

用例:

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

Production Build

Vite 在生產(chǎn)環(huán)境構(gòu)建時(shí)會(huì)進(jìn)行打包。因?yàn)樵?ES 模塊導(dǎo)入在瀑布流網(wǎng)絡(luò)請求中很容易導(dǎo)致頁面的加載時(shí)間過長讓人難以接受。

執(zhí)行 vite build 來打包應(yīng)用。

在內(nèi)部我們使用 Rollup 來生成最終的構(gòu)建結(jié)果。構(gòu)建配置我們將會(huì)透傳給 Rollup，一些選項(xiàng)我們可以通過 CLI 來進(jìn)行透傳 (參考 build/index.ts 來獲得更多信息)。

Modes and Environment Variables

模式選項(xiàng)用于指定 import.meta.env.MODE 的值，同時(shí)正確的環(huán)境變量文件將會(huì)被加載。

默認(rèn)存在兩種模式: - development 使用于 vite 以及 vite serve - production 使用于 vite build

你可以通過 --mode 選項(xiàng)來覆蓋默認(rèn)的模式，例如你想以開發(fā)模式來進(jìn)行構(gòu)建：

vite build --mode development

當(dāng)執(zhí)行 vite 命令時(shí)，環(huán)境變量將會(huì)從當(dāng)前目錄的以下文件中被加載

.env # 在任何情況下都被加載 .env.local # 在任何情況下都被加載, 會(huì)被 git 忽略 .env.[mode] # 僅在當(dāng)前指定的模式下被加載 .env.[mode].local # 僅在當(dāng)前指定的模式下被加載, 會(huì)被 git 忽略

只有 VITE_ 開頭的變量會(huì)暴露在你的代碼中。例如 VITE_SOME_KEY=123 將會(huì)暴露在 import.meta.env.VITE_SOME_KEY。但是 SOME_KEY=123 將不會(huì)。 因?yàn)?.env 文件或許會(huì)被一些用戶在服務(wù)端或者構(gòu)建腳本中使用。有可能包含一些敏感信息不適合出現(xiàn)在瀏覽器。

API

Dev Server

你可以使用這個(gè) API 來自定義本地開發(fā)服務(wù)。這個(gè)服務(wù)接受一些插件并且將會(huì)注入到 Koa app 實(shí)例當(dāng)中：

const { createServer } = require('vite')const myPlugin = ({root, // 項(xiàng)目根路徑，絕對路徑app, // Koa app 實(shí)例server, // http server 實(shí)例watcher // chokidar file watcher instance }) => {app.use(async (ctx, next) => {// 你可以在這里做一些預(yù)處理。這些是最原始的請求// 在 vite 接觸它之前if (ctx.path.endsWith('.scss')) {// vue <style lang="xxx"> 默認(rèn)已經(jīng)被支持只要默認(rèn)的預(yù)處理器被安裝// 所以下面的寫法僅應(yīng)用于 <link ref="stylesheet" href="*.scss"> 或者 js imports like// `import '*.scss'`.console.log('pre processing: ', ctx.url)ctx.type = 'css'ctx.body = 'body { border: 1px solid red }'}// ...wait for vite to do built-in transformsawait next()// Post processing before the content is served. Note this includes parts// compiled from `*.vue` files, where <template> and <script> are served as// `application/javascript` and <style> are served as `text/css`.// 在內(nèi)容被發(fā)送之前進(jìn)行預(yù)處理包括以下部分// 編譯 `*.vue` 文件，<template> 和 <script> 以 `application/javascript` 的形式托管服務(wù)， <style> 以 `text/css` 的形式托管服務(wù)if (ctx.response.is('js')) {console.log('post processing: ', ctx.url)console.log(ctx.body) // 可以是字符串或者可讀流}}) }createServer({configureServer: [myPlugin] }).listen(3000)

Build

獲取更全面的選項(xiàng)請查看 build/index.ts

const { build } = require('vite');(async () => {// All options are optional.// check out `src/node/build/index.ts` for full options interface.const result = await build({rollupInputOptions: {// https://rollupjs.org/guide/en/#big-list-of-options},rollupOutputOptions: {// https://rollupjs.org/guide/en/#big-list-of-options},rollupPluginVueOptions: {// https://github.com/vuejs/rollup-plugin-vue/tree/next#options}// ...}) })()

How and Why

與 vue-cli 以及 其他打包工具的區(qū)別

主要的區(qū)別是 Vite 在開發(fā)環(huán)境下沒有打包的過程。源碼中的模塊的導(dǎo)入語法是服務(wù)端直接發(fā)送給瀏覽器運(yùn)行。瀏覽器解析它們通過原生的 <script module> 支持，對每一個(gè) import 使用 http 請求。本地開發(fā)服務(wù)將攔截這些請求并進(jìn)行必要的代碼轉(zhuǎn)換。例如 import *.vue 文件將會(huì)在發(fā)送給瀏覽器之前被編譯。

通過這種方式處理我們有以下優(yōu)勢:

• 不需要等待打包，所以冷啟動(dòng)的速度將會(huì)非常快
• 代碼是按需編譯的。只有你當(dāng)前頁面實(shí)際導(dǎo)入的模塊才會(huì)被編譯。你不需要等待整個(gè)應(yīng)用程序被打包完才能夠啟動(dòng)服務(wù)。這在有很多頁面的應(yīng)用上體驗(yàn)差別更加巨大。
• 熱替換的性能將與模塊的總數(shù)量無關(guān)。這將使得熱替換變得非常迅速無論你的應(yīng)用有多大。

整個(gè)頁面的刷新比起基于工具打包會(huì)慢一點(diǎn)。存在很深的導(dǎo)入鏈的情況下的原生的 ES 模塊的導(dǎo)入很容易導(dǎo)致網(wǎng)絡(luò)瀑布。然而這是本地開發(fā)與實(shí)際編譯相比差別應(yīng)該不大。(在頁面重載時(shí)不需要編譯，因?yàn)榫幾g結(jié)果已經(jīng)緩存在內(nèi)存中了)

因?yàn)榫幾g是在 Node 中完成的，在技術(shù)上我們可以進(jìn)行任何的代碼轉(zhuǎn)換，沒有什么可以阻止你捆綁最終打包到生產(chǎn)環(huán)境的代碼。事實(shí)上， Vite 提供了 vite build 命令來進(jìn)行精確的打包讓你的應(yīng)用在生產(chǎn)環(huán)境中不會(huì)發(fā)生網(wǎng)絡(luò)瀑布。

How is This Different from es-dev-server?

es-dev-server 是一個(gè)非常好的項(xiàng)目，我們早期設(shè)計(jì)有很多靈感來自于它。下面是 Vite 和 es-dev-server 的區(qū)別以及為什么我們不以 es-dev-server 中間件的形式來實(shí)現(xiàn) Vite：

• Vite 的主要目標(biāo)之一是實(shí)現(xiàn)熱替換，但是 es-dev-server 的內(nèi)部不是很透明導(dǎo)致無法通過中間件來使其很好的工作
• Vite 目標(biāo)做一個(gè)獨(dú)立的工作同時(shí)在開發(fā)環(huán)境以及構(gòu)建時(shí)使用。你可以無需配置便可以針對同一份源碼在開發(fā)環(huán)境或構(gòu)建時(shí)使用 Vite
• Vite 對處理一些明確類型的導(dǎo)入文件是更加有態(tài)度的。例如 .css 文件和靜態(tài)資源。基于上述理由這些處理方式類似于 vue-cli

How is This Different from Snowpack?

Snowpack v2 和 Vite 在本地開發(fā)服務(wù)都提供了原生 ES 模塊的導(dǎo)入。Vite 依賴預(yù)優(yōu)化的靈感也來自于Snowpack v1。在開發(fā)反饋速度上面，兩個(gè)項(xiàng)目非常類似。一些值得注意的不同點(diǎn)如下：

• Vite 被創(chuàng)造出來用于處理基于原生 ES 模塊的熱替換功能。當(dāng) Vite 首次發(fā)布能夠正常工作的基于原生 ES 模塊的熱替換功能時(shí)，沒有其他的項(xiàng)目積極嘗試將原生 ES 模塊的熱替換功能用于生產(chǎn)。

Snowpack v2 最初也不支持熱替換但是計(jì)劃在之后的版本提供。這將使得兩個(gè)項(xiàng)目更加的類似。Vite 和 Snowpack 計(jì)劃合作針對原生 ES 模塊的熱替換提供一個(gè)通用的 API 規(guī)范。但是由于兩個(gè)項(xiàng)目的內(nèi)部實(shí)現(xiàn)方式的區(qū)別，兩個(gè)項(xiàng)目的 API 仍將會(huì)有所區(qū)別。

• 兩個(gè)項(xiàng)目的解決方案都是在生產(chǎn)環(huán)境進(jìn)行應(yīng)用的打包。但是 Vite 使用 Rollup 進(jìn)行構(gòu)建，Snowpack 通過插件使用 Parcel/webpack 進(jìn)行構(gòu)建。Vite 在很多場景下構(gòu)建結(jié)果是更快并且更小的。另外與打包程序更緊密的結(jié)合可以更容易的在開發(fā)環(huán)境和生產(chǎn)環(huán)境配置中修改 Vite 的轉(zhuǎn)換規(guī)則以及插件。
• Vue support is a first-class feature in Vite. For example, Vite provides a much more fine-grained HMR integration with Vue, and the build config is fined tuned to produce the most efficient bundle.
• Vite 對 Vue 的支持是一流的。Vite 針對 Vue 提供了更細(xì)粒度的熱替換功能以及在構(gòu)建配置上做了調(diào)整來生成最有效的打包結(jié)果。

Contribution

See Contributing Guide.

Trivia

vite is the french word for "fast" and is pronounced /vit/.

License

MIT

總結(jié)

以上是生活随笔為你收集整理的wtl单文档选项_Vite 中文文档翻译的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。