Vuetify, Webpack से Vite तक

Dec 08 2022

अपने Vue2 को Vuetify प्रोजेक्ट के साथ Webpack से Vite में माइग्रेट करने के बारे में चरण-दर-चरण मार्गदर्शिका

मेरे पास Vue2 में लिखी गई बहुत सी पुरानी परियोजनाएँ हैं। और मैं किस स्टाइल लाइब्रेरी का उपयोग करता हूं? निश्चित रूप से Vuetify।

यह लेख आपको Vite की शक्ति का लाभ उठाने में मदद करने के लिए डिज़ाइन किया गया है। क्योंकि, भले ही आपके पास विरासत कोड हो, आप तेजी से विकास के समय के पात्र हैं।

यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता नहीं है। यदि आप अपने विकास को गति देना चाहते हैं। यदि आप समग्र रूप से बेहतर अनुभव चाहते हैं। आप Vite पर एक नज़र डालना चाह सकते हैं।

Vite में Webpack के समान कार्य हैं। यह आपके कोड को सिंगल फाइल कंपोनेंट्स और टाइपस्क्रिप्ट से वैनिला जावास्क्रिप्ट में बंडल और संकलित करता है।

यदि यह वही करता है तो मैं इसका उपयोग क्यों करना चाहूंगा?

सरल। Vite द्वारा निर्मित बंडल छोटे होते हैं। व्यवहार में इसका मतलब 2 चीजें हैं:

तेज विकास गति। चूंकि इसे कम कोड का उत्पादन करना पड़ता है, इसलिए यह तेजी से पारदर्शी होता है।
तेज़ ब्राउज़र लोड गति। छोटे बंडल तेजी से लोड होते हैं।

अस्वीकरण

इससे पहले कि हम Vite में गोता लगाएँ। आपको यह जानना होगा कि यह पुराने ब्राउज़रों का समर्थन नहीं करता है।

कोलाहल निकालना

अपने package.json पर बेबेल से संबंधित सब कुछ हटा दें:

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

यह हो जाने के बाद वेबपैक से संबंधित लाइब्रेरी को हटा दें।

वेबपैक निकाल रहा है

अपने package.json पर निकालें:

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

वेबपैक और बेबेल को हटा दिया गया। अब। चलो Vite जोड़ें।

वाइट जोड़ना

स्थापित करें 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 कॉन्फ़िगरेशन जोड़ना

हम वेबपैक में कॉन्फ़िगरेशन कैसे जोड़ते हैं, उसी तरह से हमें इसे 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"),
  },
},

वाइट स्क्रिप्ट जोड़ें

हमें अपनी स्क्रिप्ट को भी अपडेट करने की जरूरत है। इस से:

"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 के साथ काम नहीं करेगा। इसे पूरा करने के लिए हमें कुछ विशेष ट्वीक की जरूरत है।

अतिरिक्त चरण

अब से। जब भी हम सिंगल फाइल कंपोनेंट (एसएफसी) आयात करते हैं तो आपको एक्सटेंशन शामिल करने की आवश्यकता होती है।

जब पहले हम ऐसा कर सकते थे:

import HelloWorld from '@/components/HelloWorld';

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

Vite के साथ Eslint सही तरीके से काम करे इसके लिए हमें कुछ सेटिंग्स एडजस्ट करने की जरूरत है। यदि आप इसका उपयोग नहीं करते हैं तो बेझिझक इस खंड को छोड़ दें।

सामान्य बेबेल/एस्लिंट कॉन्फ़िगरेशन कुछ ऐसा है:

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "@babel/eslint-parser"
  },
  "rules": {}
}

envविकल्प में से node: trueपर जाएँ es2021: true।
को पूरी तरह से हटा दें parserOptions।

{
  "root": true,
  "env": {
    "es2021": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "rules": {}
}

Vuetify को Vite के साथ संसाधित करने के लिए हमें निम्न पैकेज स्थापित करना होगा।

npm install -D unplugin-vue-components

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

निष्कर्ष

Webpack से Vite में माइग्रेट करना कोई बड़ी परेशानी नहीं है। हालांकि, गति में वृद्धि इसके लायक है।
हमें अब बाबुल की जरूरत नहीं है।
फ़ाइल स्थानों के बारे में Vite का मत है।
Vuetify को विशेष कॉन्फ़िगरेशन की आवश्यकता होती है।