前言

今天逛微博的时候不当心看到了尤雨溪的一条微博：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了？