Vuetify, từ Webpack đến Vite

Dec 08 2022

Hướng dẫn từng bước về cách di chuyển Vue2 của bạn với dự án Vuetify từ Webpack sang Vite

Tôi có rất nhiều dự án cũ được viết bằng Vue2. Và tôi sử dụng thư viện kiểu nào? Vuetify tất nhiên.

Bài viết này được thiết kế để giúp bạn tận dụng sức mạnh của Vite. Bởi vì, ngay cả khi bạn có mã kế thừa, bạn vẫn xứng đáng có thời gian phát triển nhanh.

Nếu bạn không cần hỗ trợ các trình duyệt cũ hơn. Nếu bạn muốn tăng tốc các bản dựng phát triển của mình. Nếu bạn muốn có một trải nghiệm tổng thể tốt hơn. Bạn có thể muốn xem qua Vite.

Vite có các chức năng tương tự như Webpack. Nó kết hợp và biên dịch mã của bạn từ Các thành phần tệp đơn và Bản mô tả thành vanilla JavaScript.

Nếu nó làm như vậy tại sao tôi muốn sử dụng nó?

Giản dị. Các gói do Vite sản xuất nhỏ hơn. Trong thực tế, điều này có nghĩa là 2 điều:

Tốc độ phát triển nhanh hơn. Vì nó phải tạo ra ít mã hơn nên nó dịch mã nhanh hơn.
Tốc độ tải trình duyệt nhanh hơn. Các gói nhỏ hơn tải nhanh hơn.

từ chối trách nhiệm

Trước khi chúng tôi đi sâu vào Vite. Bạn cần biết rằng nó KHÔNG hỗ trợ các trình duyệt cũ hơn.

Loại bỏ babel

Trên gói.json của bạn, hãy xóa mọi thứ liên quan đến babel như vậy:

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

Điều đó đã xong, hãy xóa các thư viện liên quan đến Webpack.

Gỡ bỏ Webpack

Trên gói.json của bạn, hãy xóa:

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

Đã xóa Webpack và Babel. Hiện nay. Hãy thêm Vite.

Thêm Vite

Cài đặt vitevà vite-plugin-vue2bằng cách chạy:

npm install -D vite vite-plugin-vue2

Sắp xếp lại các tập tin

Vite có một chút ý kiến với cấu trúc tệp của dự án của chúng tôi. Chúng ta sẽ phải thay đổi thư mục của các tệp tĩnh.

Mọi thứ trong thư mục chung, hãy đưa nó ra thư mục gốc.

“Mọi thứ” mà tôi đang đề cập đến thường là:

index.html
favicon.ico

Các thay đổi đối với tệp index.html

Nếu bạn mở index.html của mình , bạn sẽ thấy nội dung như sau:

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

Nói cách khác. Tất cả mọi thứ với <%...%>nhu cầu để đi.

Khi đã xong, chúng ta sẽ có một cái gì đó như thế này:

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

Thêm cấu hình Vite

Theo cách tương tự như cách chúng tôi thêm cấu hình vào Webpack, chúng tôi cần thực hiện điều đó với Vite.

Một tập tin cấu hình đơn giản:

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

Ngày thứ nhất. Chúng tôi nhập các phụ thuộc chúng tôi cần.

import { defineConfig } from "vite"

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

import path from "path";

Bây giờ đến những thứ khó khăn.

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

plugins: [vue()],

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

Thêm tập lệnh Vite

Chúng tôi cũng cần cập nhật tập lệnh của mình. Từ đây:

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

Cấu hình của chúng tôi cho đến nay sẽ không hoạt động với Vuetify. Chúng tôi cần một số chỉnh sửa đặc biệt để hoàn thành việc này.

bước bổ sung

Từ giờ trở đi. Bất cứ khi nào chúng tôi nhập một Thành phần Tệp Đơn lẻ (SFC), bạn cần bao gồm phần mở rộng.

Khi trước khi chúng ta có thể làm điều này:

import HelloWorld from '@/components/HelloWorld';

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

Để Eslint hoạt động chính xác với Vite, chúng tôi cần điều chỉnh một số cài đặt. Nếu bạn không sử dụng nó, vui lòng nhảy qua phần này.