Vuetify, dari Webpack ke Vite

Dec 08 2022

Panduan langkah demi langkah tentang cara memigrasi Vue2 Anda dengan proyek Vuetify dari Webpack ke Vite

Saya memiliki banyak proyek lawas yang ditulis dalam Vue2. Dan perpustakaan gaya apa yang saya gunakan? Vuetify tentu saja.

Artikel ini dirancang untuk membantu Anda memanfaatkan kekuatan Vite. Karena, meskipun Anda memiliki kode lawas, Anda berhak mendapatkan waktu pengembangan yang cepat.

Jika Anda tidak perlu mendukung browser lama. Jika Anda ingin mempercepat pembangunan Anda. Jika Anda menginginkan pengalaman yang lebih baik secara keseluruhan. Anda mungkin ingin melihat Vite.

Vite memiliki fungsi yang mirip dengan Webpack. Itu menggabungkan dan mengkompilasi kode Anda dari Single File Components dan TypeScript ke vanilla JavaScript.

Jika itu sama mengapa saya ingin menggunakannya?

Sederhana. Bundel yang diproduksi oleh Vite berukuran lebih kecil. Dalam praktiknya ini berarti 2 hal:

Kecepatan pengembangan lebih cepat. Karena harus menghasilkan lebih sedikit kode, maka transpiles lebih cepat.
Kecepatan memuat browser lebih cepat. Bundel yang lebih kecil memuat lebih cepat.

Penafian

Sebelum kita menyelami Vite. Anda perlu tahu bahwa itu TIDAK mendukung browser lama.

Menghapus babel

Di package.json Anda hapus semua yang berhubungan dengan babel seperti:

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

Selesai, mari kita hapus pustaka terkait Webpack.

Menghapus Webpack

Di package.json Anda hapus:

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

Webpack dan Babel dihapus. Sekarang. Mari tambahkan Vite.

Menambahkan Vite

Instal vitedan vite-plugin-vue2dengan menjalankan:

npm install -D vite vite-plugin-vue2

Mengatur ulang file

Vite sedikit berpendapat dengan struktur file proyek kami. Kita harus mengubah direktori file statis kita.

Semua yang ada di folder publik, bawa ke direktori root.

“Segala sesuatu” yang saya maksud biasanya adalah:

index.html
favicon.ico

Perubahan pada file index.html

Jika Anda membuka index.html , Anda akan menemukan sesuatu seperti ini:

<!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>

Dengan kata lain. Segala sesuatu dengan <%...%>kebutuhan untuk pergi.

Setelah itu selesai kita harus memiliki sesuatu seperti ini:

<!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>

Menambahkan konfigurasi Vite

Mirip dengan cara kami menambahkan konfigurasi ke Webpack, kami perlu melakukannya dengan Vite.

File konfigurasi sederhana:

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"),
    },
  },
});

Pertama. Kami mengimpor dependensi yang kami butuhkan.

import { defineConfig } from "vite"

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

import path from "path";

Sekarang ke hal-hal yang sulit.

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

plugins: [vue()],

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

Tambahkan skrip Vite

Kami juga perlu memperbarui skrip kami. Dari sini:

"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"
},

Konfigurasi kami sejauh ini tidak akan berfungsi dengan Vuetify. Kami membutuhkan beberapa penyesuaian khusus untuk menyelesaikan ini.

Langkah tambahan

Dari sekarang. Setiap kali kami mengimpor Komponen File Tunggal (SFC), Anda harus menyertakan ekstensi.

Kapan sebelumnya kita bisa melakukan ini:

import HelloWorld from '@/components/HelloWorld';

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

Agar Eslint berfungsi dengan benar dengan Vite, kami perlu menyesuaikan beberapa pengaturan. Jika Anda tidak menggunakannya, jangan ragu untuk melewati bagian ini.