前言

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

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

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

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

好傢伙！vite 都 2.0 了？！我還覺得 vite 一直在努力發佈 1.0 版呢！本想着等它發佈了 1.0 了，穩定了再學，結果它居然以迅雷不及掩耳盜鈴之勢 2.0 了！真像評論裏說的：我學的還沒你寫的快呢！react

抱怨沒有用

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

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

譯文

配置選項更改

如下選項已被刪除，應經過插件實現：github
- resolvers
- transforms
- indexHtmlTransforms
jsx 和 enableEsbuild 已被刪除；請改用新的 esbuild 選項。web
如今，與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了？

前言

抱怨沒有用

譯文

配置選項更改

Vue 支持

自定義的 Blocks 轉換

支持 React

HMR API 更改

Manifast 格式更改

對於插件做者

結語

往期精彩文章

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

前言

抱怨沒有用

譯文

配置選項更改

Vue 支持

自定義的 Blocks 轉換

支持 React

HMR API 更改

Manifast 格式更改

對於插件做者

結語

往期精彩文章

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