乐趣区

关于javascript:Migrate-From-Vuecli-to-Vite

jiezi

背景

我最近将一些 Vue2 我的项目从 vue-cli(webpack)迁徙到了 vite。

在第三次这样做之后，我对迁徙过程做了一些具体的记录，并将在这篇文章中进行总结。

文章目录：

  • package.json
  • index.html
  • vite.config.js
  • 测试用例
  • Lint
  • 公布
  • 可视化 Bundle
  • 一些指标
  • 论断

注释

package.json

devDependencies

删除 @vue/cli-service 依赖项，并替换为 vite 🚀

npm un @vue/cli-service
npm i vite -D

你也能够删除任何其余以 @vue/cli-plugin-xxx 结尾的开发依赖项，因为它们将不再起作用，例如：

npm un vue/cli-plugin-babel vue/cli-plugin-eslint vue/cli-plugin-unit-jest

如果你应用的是 Vue2，咱们还要补充vite-plugin-vue2, 这个会用在vite.config.js 中：

npm i vite-plugin-vue2 -D

另外，如果你应用的是 git hooks，则可能须要显式装置yorkie 能力使所有内容像以前一样工作。

npm i yorkie -D

scripts

咱们将 serve 在 vite 中用相应的脚本替换 vue-cli 脚本：

当然，你也能够保留 serve。

其余脚本，比方build, jest, lint，之后也会讲到。

index.html

持续，把 public/index.html 移至我的项目的根目录。1️⃣

咱们还将增加 vite 须要的入口点：

<script type="module" src="/src/main.js"></script> 2️⃣

最初，咱们会从咱们的代替门路图标 <%= BASE_URL %> favicon.ico（vite 会在您的专用文件夹中为您找到该图标）。3️⃣

vite.config.js

咱们须要将以前的版本转换 vue.config.js 为新版本vite.config.js。

让咱们从以下几行开始：

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({
  plugins: [createVuePlugin(),
  ],
})

迁徙的时候，对开发尽量放弃通明，一些配置要和之前的保持一致，比方端口：

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({[...],
  server: {port: 8080,}
})

你将在此处找到所有可能的配置选项：https://vitejs.dev/config/#co…

‘@’ 别名

如果你在 webpack 中应用了别名导入文件，则当初你须要从新创立它：

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({[...],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ]
  },
})

“.vue” 导入门路

应用 webpack 你能够疏忽 .vue 文件后缀，然而在 vite 中不行，须要带上。

// From
import DotsLoader from '@/components/DotsLoader'

// to
import DotsLoader from '@/components/DotsLoader.vue'

路由提早加载简化

在 Route 申明中，你能够平安地删除 webpackChunkName 可能有的任何正文，例如该行：

{
  path: '/links',
  name: 'linksPage',
  component: () => import(/* webpackChunkName: "links" */ './views/LinksPage.vue'),
},

简化为：

{
  path: '/links',
  name: 'linksPage',
  component: () => import'./views/LinksPage.vue'),
},

在这里我不是专家，然而如果您真的想自定义块的名称，则能够通过笼罩汇总 output.entryFileNames 来实现。

另请参见 vite build.rollupOptions，理解如何间接将某些选项传递给 rollup.

环境变量

Vite 不辨认 process.env, 取而代之的是：import.meta.env.

举个例子：

须要留神的是，要确保 NODE_ENV=production, 你须要在.env 文件 或生产环境变量中 进行设置。

参见官网文档：https://vitejs.dev/guide/env-…

至于自定义环境变量，咱们不再须要像以前那样为它们加上前缀VUE_APP，而是当初须要应用VITE。

任何以 VITE_xxx 结尾的变量都须要你在代码中提供。

比方 .env.local 文件中的一个变量：

VITE_APP_BACKEND_URL=http://localhost:3001

测试用例

当初咱们不能再应用 vue-cli-service test:unit了，让咱们重新配置。

首先，能够更新 test 脚本：

如果你的 babel.config.js 文件中蕴含相似内容：

presets: ['@vue/cli-plugin-babel/preset'],

须要替换为：

presets: ['@babel/preset-env']

我也有与 import.meta.env 语句谬误。

可怜的是，目前尚无针对单元测试的现成设置，但此评论对我有所帮忙：

https://github.com/vitejs/vit…

我的 babel.config.js 文件当初看起来是：

module.exports = {presets: ['@babel/preset-env'],
  // For Jest not to be annoyed by 'import.meta.xxx'
  plugins: [function () {
      return {
        visitor: {MetaProperty(path) {path.replaceWithSourceString('process')
          },
        },
      }
    },
  ],
}

或者，你能够应用此 Babel 插件，该插件也能解决 import.meta 在测试中的问题：
https://github.com/javiertury…

在这里，能够关注无关 vite 和 Jest 的一些探讨：
https://github.com/vitejs/vit…

“regeneratorRuntime”error

  49 | export const actions = {> 50 |   init: async ({ commit}, routeContext) => {ReferenceError: regeneratorRuntime is not defined

regenerator-runtime 在我的 setupTests.js 中装置并援用, 仿佛已解决了该问题。

npm i regenerator-runtime -D

‘jest.config.js’：

module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    // tells Jest to handle `*.vue` files
    'vue',
  ],
  transform: {
    // process `*.vue` files with `vue-jest`
    '.*\\.(vue)$': 'vue-jest',
    // process `*.js` files with `babel-jest`
    '.*\\.(js)$': 'babel-jest',
  },
  setupFiles: ['./setupTests'],
  moduleNameMapper: {'^@/(.*)$': '<rootDir>/src/$1',
  },
  collectCoverage: false,
};

而后是我的“setupTests.js”的第一行：

import 'regenerator-runtime/runtime';

Lint

只须要替换两个与 lint 无关的脚本即可：

公布

在此示例中，我的利用由 S3 / CloudFront 提供。

我有两个生产环境：preprod 和 prod。

所以，我有两个 .env 文件：

  1. .env.preprod
  2. .env.prod

当应用 rollup 构建时，vite 将依据调用构建脚本时应用的模式，用其值替换咱们的环境变量。

这与 vue-cli 十分类似，因而更新咱们的 package.json脚本就非常简单间接：

无关此的更多详细信息，请在此处进行具体阐明：
https://vitejs.dev/guide/env-…

Tips 还必须笼罩“vite.config.js”中，最大包的大小：

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
export default defineConfig({[...],
  build: {chunkSizeWarningLimit: 700, // Default is 500},
})

可视化 Bundle

"build:report": "vue-cli-service build --report",

我应用 rollup-plugin-visualizer 来实现这个性能。

导入这个插件，并在我的 vite.config.js 中援用它：

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import visualizer from 'rollup-plugin-visualizer'
export default defineConfig({
  plugins: [createVuePlugin(),
    visualizer(),],
  [...],
})

关上新生成的 stats.html 文件时，这是我的后果：

这个和咱们罕用的 webpack-bundle-analyzer 是相似的。

一些指标

启动工夫

  • 用 vite 启动：〜4 秒（即便我的项目持续增长，它也应该放弃不变🙌）
  • 用 vue-cli/webpack 启动：大概30 秒（随着咱们向我的项目中增加更多文件，它将一直减少😢）

热更新

vite：

简略的更改（HTML 标记，CSS 类 …）：立即失效。

简单的更改（重新命名 JS 函数，增加组件…) : 不确定，有时候我更喜爱本人刷新。

vue-cli/webpack：

简略的的更改：〜4sec😕

更简单的更改：我从不期待，而是手动刷新页面。

首次页面申请

当 vite 启动后, 第一次申请一个蕴含很多组件的简单页面，让咱们看一下 Chrome DevTools 中的 network 标签:

  • vite：〜1430 JS 文件申请, 在〜11 秒 内实现 😟
  • vue-cli/webpack：约 23 个 JS 文件申请, 在约 6 秒 内实现 👍

在这个方面来看，能够采取一些优化策动，比方组件懒加载等。

论断

总的来说，到目前为止，应用 vite 的开发体验十分好，🌟 🌟 🌟 🌟 🌟

对于依然应用 webpack 的我的项目，状况可能会变得越来越艰巨。

好了，内容大略就这么多，心愿对大家有所帮忙。

满腹经纶，如有谬误，欢送斧正。

谢谢。

最初，如果感觉内容有帮忙，能够关注下我的公众号，把握最新动静，一起学习！

退出移动版