前言

今天逛微博的時候不小心看到了尤雨溪的一條微博：

新年禮物🎁？啥禮物？vue3 的 IE11 相容包出了？還是 Long Time Support 的 vue2.7 出了？或者是 vite 出1.0了？趕緊點進去看一眼：

看來 vite 終於出 1.0 了啊，趕緊點 Get Started 進去看看：

嗯？從 v1 版遷移？一般不都是出了更高的版本才會讓你從低版本遷徙麼？點進去一看：

好傢伙！vite 都 2.0 了？！我還以為 vite 一直在努力釋出 1.0 版呢！本想著等它釋出了 1.0 了，穩定了再學，結果它竟然以迅雷不及掩耳盜鈴之勢 2.0 了！真像評論裡說的：我學的還沒你寫的快呢！

抱怨沒有用

雖然我都忍不住想吐槽一句學不動了，不過仔細想想更新到 2.0 也未嘗不是件好事，相信大多數人都和我一樣根本沒有深入的去了解過 vite，只不過是看了幾篇文章知道 vite 是幹嘛的，和 webpack 有什麼區別？

現在直接就學新的好了，我們先來簡單的翻譯一下從 v1 版本遷移這部分：

譯文

配置選項更改

以下選項已被刪除，應通過外掛實現：
- resolvers
- transforms
- indexHtmlTransforms
jsx 和 enableEsbuild 已被刪除；請改用新的 esbuild 選項。
現在，與CSS相關的選項巢狀在 css 裡面。
現在，所有特定於構建的選項都巢狀在 build 裡。
- rollupInputOptions和rollupOutputOptions被替換為build.rollupOptions。
- esbuildTarget被替換為build.target。
- emitManifest被替換為build.manifest。
- 由於可以通過外掛鉤子函式或其他選項實現以下構建選項，因此已刪除它們：
  - entry
  - rollupDedupe
  - emitAssets
  - emitIndex
  - shouldPreload
  - configureBuild
現在，所有伺服器特定的選項都巢狀在了server裡。
- hostname被替換為server.host。
- httpsOptions已被刪除，server.https可以直接接受 options 物件。
- chokidarWatchOptions被替換為server.watch。
- assetsInclude現在接受string | RegExp | (string | RegExp)[]型別的引數，而不是一個function。
刪除所有Vue特定選項；將選項傳遞給 Vue 外掛。

Vue 支援

Vite 2.0 core 現在與框架無關。現在通過@vitejs/plugin-vue這個外掛來支援Vue。只需安裝並將其新增到 Vite 配置中即可：

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}
複製程式碼

自定義的 Blocks 轉換

自定義外掛可用於轉換 Vue 的自定義塊，如下所示：

// vite.config.js
import vue from '@vitejs/plugin-vue'

const vueI18nPlugin = {
  name: 'vue-i18n',
  transform(code, id) {
    if (!/vue&type=i18n/.test(id)) {
      return
    }
    if (/\.ya?ml$/.test(id)) {
      code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
    }
    return `export default Comp => {
      Comp.i18n = ${code}
    }`
  }
}

export default {
  plugins: [vue(), vueI18nPlugin]
}
複製程式碼

支援 React

現在可通過@vitejs/plugin-react-refresh這個外掛來支援 React Fast Refresh。

HMR API 更改

import.meta.hot.acceptDeps()已不推薦使用。import.meta.hot.accept()現在可以接受一個或多個 deps。

Manifast 格式更改

現在，構建 Manifast 需要使用以下格式：

{
  "index.js": {
    "file": "assets/index.acaf2b48.js",
    "imports": [...]
  },
  "index.css": {
    "file": "assets/index.7b7dbd85.css"
  }
  "asset.png": {
    "file": "assets/asset.0ab0f9cd.png"
  }
}
複製程式碼

對於 JS 的 entry chunks，它還會列出其匯入的 chunks，這些 chunks 可用於 render 的預載入指令。

對於外掛作者

Vite 2 使用了完全重新設計的外掛介面，該介面擴充套件了彙總外掛。請閱讀新的《外掛開發指南》。

有關將 v1 外掛遷移到 v2 的一些說明：

resolvers -> 使用 resolveId hook
transforms -> 使用 transform hook
indexHtmlTransforms -> 使用 transformIndexHtml hook
Serving virtual files -> 使用 resolveId + load hook
新增alias、define或其它配置選項 -> 使用 config hook

由於大多數邏輯應通過外掛 hooks 而不是中介軟體來完成，因此大大減少了對中介軟體的需求。內部伺服器應用程式現在是一個很好的 old connect 例項，而不是 Koa。

結語

可以看出 vite 2.0 除了更改了許多 API 以外，最大的改變就是不再與 Vue 預設綁定了，也就是與框架無關。

幾個月前我下載了 vite 試驗了一下，預設就是個 vue 3 的專案，感覺尤雨溪的野心越來越大了：以前可能就是想在 vue 生態上幹掉 webpack，現在想的可能就是直接幹掉 webpack，反正 webpack 我現在也忘得差不多了，重新再學一遍新的 webpack 5 還不如學學猶大的 vite 呢。

此文首發於公眾號：前端學不動

vite1.0還沒學呢 這就出2.0了？

前言