Vuetify, от Webpack до Vite

Dec 08 2022

Пошаговое руководство по переносу проекта Vue2 с Vuetify с Webpack на Vite

У меня много устаревших проектов, написанных на Vue2. И какую библиотеку стилей я использую? Конечно.

У меня много устаревших проектов, написанных на Vue2. И какую библиотеку стилей я использую? Конечно .

Эта статья призвана помочь вам использовать возможности Vite. Потому что, даже если у вас есть устаревший код, вы заслуживаете быстрой разработки.

Если вам не нужна поддержка старых браузеров. Если вы хотите ускорить разработку билдов. Если вы хотите, чтобы общий лучший опыт. Вы можете взглянуть на Vite.

Vite имеет те же функции, что и Webpack. Он объединяет и компилирует ваш код из компонентов одного файла и Typescript в ванильный JavaScript.

Если он делает то же самое, зачем мне его использовать?

Простой. Пакеты, производимые Vite, меньше. На практике это означает 2 вещи:

Более высокая скорость разработки. Поскольку он должен создавать меньше кода, он быстрее транспилируется.
Более высокая скорость загрузки браузера. Пакеты меньшего размера загружаются быстрее.

Отказ от ответственности

Прежде чем мы погрузимся в Vite. Вы должны знать, что он НЕ поддерживает старые браузеры.

Удаление бабеля

В вашем package.json удалите все, что связано с babel, например:

"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",

После этого давайте удалим библиотеки, связанные с Webpack.

Удаление веб-пакета

В вашем package.json удалите:

"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",

Webpack и Babel удалены. В настоящее время. Добавим Вите.

Добавление Вайта

Установите viteи vite-plugin-vue2запустите:

npm install -D vite vite-plugin-vue2

Изменение порядка файлов

Vite немного самоуверен со структурой файлов нашего проекта. Нам придется изменить каталоги наших статических файлов.

Все, что было в общей папке, вынесите в корневой каталог.

Это «все», о чем я обычно говорю, это:

index.html
favicon.ico

Изменения в файле index.html

Если вы откроете свой index.html , вы найдете что-то вроде этого:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Другими словами. Все , что <%...%>нужно, уходит.

Как только это будет сделано, у нас должно получиться что-то вроде этого:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="./favicon.ico" />
    <title>Admin</title>
    <script type="module" src="/src/main.js" defer></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but the admin doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<script type="module" src="/src/main.js" defer></script>

Добавление конфигураций Vite

Подобно тому, как мы добавляем конфигурации в Webpack, нам нужно сделать это с Vite.

Простой файл конфигурации:

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Первый. Импортируем нужные нам зависимости.

import { defineConfig } from "vite"

import { createVuePlugin as vue } from "vite-plugin-vue2";

import path from "path";

Теперь к трудным вещам.

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(''), "./src"),
    },
  },
});

plugins: [vue()],

resolve: {
  alias: {
    "@": path.resolve(path.dirname(''), "./src"),
  },
},

Добавить скрипты Vite

Нам также необходимо обновить наши скрипты. Из этого:

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},

Наша конфигурация пока не будет работать с Vuetify. Нам нужны некоторые специальные настройки, чтобы сделать это.

Дополнительный шаг

Впредь. Всякий раз, когда мы импортируем компонент одного файла (SFC), вам необходимо включить расширение.

Когда раньше мы могли это сделать:

import HelloWorld from '@/components/HelloWorld';

import HelloWorld from '@/components/HelloWorld.vue';

Чтобы Eslint правильно работал с Vite, нам нужно настроить некоторые параметры. Если вы не используете его, смело переходите к этому разделу.