从 v1 迁移

配置项变化

  • 以下选项已被删除,应通过 插件 实现:

    • resolvers
    • transforms
    • indexHtmlTransforms
  • jsxenableEsbuild 都已被删除,请使用新的 esbuild 选项。

  • CSS 相关选项 都被包含在 css 字段下。

  • 所有 用于构建的选项 现在都在 build 字段下。

    • rollupInputOptionsrollupOutputOptions 已经被 build.rollupOptions 替代。
    • esbuildTarget 现在是 build.target
    • emitManifest 现在是 build.manifest
    • 以下构建选项已经被移除,因为它们可以通过插件钩子或其他选项实现:
      • entry
      • rollupDedupe
      • emitAssets
      • emitIndex
      • shouldPreload
      • configureBuild
  • 所有的 server-specific options 现在都在 server 字段下。

  • assetsInclude 现在接收 string | RegExp | (string | RegExp)[] 而不是一个函数。

  • 所有 Vue 特定选项都已删除;应将选项传递给 Vue 插件。

别名用法变化

alias 现在会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。此行为目前是一个直接替换,所以 1.0 风格的目录别名需要删除其结尾处的斜线:

  1. - alias: { '/@foo/': path.resolve(__dirname, 'some-special-dir') }
  2. + alias: { '/@foo': path.resolve(__dirname, 'some-special-dir') }

另外,你可以对该选项使用 [{ find: RegExp, replacement: string }] 格式以求更精确的控制。

Vue Support

Vite 2.0 核心已经是框架无关的了。对 Vue 的支持目前详见 @vitejs/plugin-vue。安装它并添加到 Vite 配置十分简单:

  1. import vue from '@vitejs/plugin-vue'
  2. export default {
  3. plugins: [vue()]
  4. }

自定义块转换

一个自定义插件可以用来转换 Vue 自定义块,如下所示:

  1. // vite.config.js
  2. import vue from '@vitejs/plugin-vue'
  3. const vueI18nPlugin = {
  4. name: 'vue-i18n',
  5. transform(code, id) {
  6. if (!/vue&type=i18n/.test(id)) {
  7. return
  8. }
  9. if (/\.ya?ml$/.test(id)) {
  10. code = JSON.stringify(require('js-yaml').safeLoad(code.trim()))
  11. }
  12. return `export default Comp => {
  13. Comp.i18n = ${code}
  14. }`
  15. }
  16. }
  17. export default {
  18. plugins: [vue(), vueI18nPlugin]
  19. }

React 支持

React Fast Refresh 现已支持,详见 @vitejs/plugin-react-refresh

HMR API 变化

import.meta.hot.acceptDeps() 已经弃用。import.meta.hot.accept() 现在可以接收一个或多个依赖。

Manifest 格式变化

构建清单现在使用以下格式:

  1. {
  2. "index.js": {
  3. "file": "assets/index.acaf2b48.js",
  4. "imports": [...]
  5. },
  6. "index.css": {
  7. "file": "assets/index.7b7dbd85.css"
  8. }
  9. "asset.png": {
  10. "file": "assets/asset.0ab0f9cd.png"
  11. }
  12. }

对于入口 JS chunk,它还列出了它导入的 chunk,这些 chunk 可以用来渲染预加载指令。

致插件作者

Vite 2 使用了一套完全重定义的,扩展了 Rollup 插件的接口。请阅读新的 插件开发指南.

一些将 v1 插件迁移到 v2 的提示:

由于大多数逻辑应该通过插件钩子而不是中间件来完成,因此对中间件的需求大大减少。内部服务器应用现在是一个很好的旧版的 connect 实例,而不是 Koa。