ฉันมีโครงการดั้งเดิมมากมายที่เขียนด้วย Vue2 และไลบรารีสไตล์ใดที่ฉันใช้ แน่นอน _

บทความนี้ออกแบบมาเพื่อช่วยให้คุณใช้ประโยชน์จากพลังของ Vite เพราะแม้ว่าคุณจะมีรหัสดั้งเดิม แต่คุณก็สมควรได้รับเวลาในการพัฒนาที่รวดเร็ว

หากคุณไม่ต้องการรองรับเบราว์เซอร์รุ่นเก่า หากคุณต้องการเพิ่มความเร็วในการสร้างการพัฒนาของคุณ หากคุณต้องการประสบการณ์ที่ดีขึ้นโดยรวม คุณอาจต้องการดู Vite

Vite มีฟังก์ชันคล้ายกับ Webpack รวมและคอมไพล์โค้ดของคุณจาก Single File Components และ Typescript ไปจนถึงวานิลลา JavaScript

ถ้ามันเหมือนกันทำไมฉันถึงต้องการใช้มัน?

เรียบง่าย. กลุ่มที่ผลิตโดย Vite มีขนาดเล็กกว่า ในทางปฏิบัติหมายถึง 2 สิ่ง:

1. ความเร็วในการพัฒนาที่เร็วขึ้น เนื่องจากต้องสร้างโค้ดน้อยลง จึงแปลได้เร็วขึ้น
2. ความเร็วในการโหลดเบราว์เซอร์ที่เร็วขึ้น บันเดิลขนาดเล็กโหลดเร็วขึ้น

ข้อจำกัดความรับผิดชอบ

• ก่อนที่เราจะดำดิ่งสู่ Vite คุณต้องรู้ว่ามันไม่รองรับเบราว์เซอร์รุ่นเก่า

กำลังถอดบาเบล

บนpackage.json ของคุณ ลบทุกอย่างที่เกี่ยวข้องกับ Babel เช่น:

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

เสร็จแล้วให้ลบไลบรารีที่เกี่ยวข้องกับ Webpack ออก

การลบ 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

ติดตั้ง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 ได้ เราต้องการการปรับแต่งพิเศษเพื่อทำให้สิ่งนี้สำเร็จ

ขั้นตอนเพิ่มเติม

จากนี้ไป. เมื่อใดก็ตามที่เรานำเข้า Single File Component (SFC) คุณต้องรวมส่วนขยาย

เมื่อก่อนเราจะทำได้ดังนี้

import HelloWorld from '@/components/HelloWorld';

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

เพื่อให้ Eslint ทำงานได้อย่างถูกต้องกับ Vite เราจำเป็นต้องปรับการตั้งค่าบางอย่าง หากคุณไม่ได้ใช้ คุณสามารถข้ามส่วนนี้ไปได้เลย

การกำหนดค่า babel/eslint ปกติจะเป็นดังนี้:

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

1. ในenvตัวเลือก ไปจากnode: trueถึงes2021: true.
2. ลบออกอย่างสมบูรณ์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 ต้องการการกำหนดค่าพิเศษ