Menambah Vite ke aplikasi web anda yang ada

Vite, disebut "Veet," adalah bundler JavaScript moden yang terkenal dengan kelajuan dan kemudahan penggunaannya. Ia adalah alat yang berkuasa yang memerlukan konfigurasi yang minimum, namun menawarkan pilihan penyesuaian yang luas. Butiran artikel ini memindahkan projek sedia ada dari bundler lain (seperti Webpack) ke Vite. Untuk projek baru, rujuk dokumentasi Vite rasmi. Malah untuk migrasi warisan, perancah projek Vite yang mudah terlebih dahulu disyorkan untuk pemahaman yang lebih baik tentang strukturnya.

Migrasi dari Webpack ke Vite

Panduan ini mencerminkan pengalaman memindahkan projek webpack yang panjang dan lama. Proses ini menyoroti keupayaan konfigurasi Vite semasa peralihan.

Konfigurasi Webpack yang tidak perlu dalam Vite

Vite secara semulajadi mengendalikan banyak tugas yang biasanya memerlukan konfigurasi webpack yang luas. Ini menghapuskan keperluan untuk banyak plugin dan tetapan webpack biasa.

Pengendalian aset statik

Webpack sering memerlukan konfigurasi eksplisit untuk memuatkan aset statik (imej, fon, dll.):

 {
  Ujian: /\.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
  Gunakan: [
    {
      loader: "pemuat fail"
    }
  ]
}

Vite menguruskannya secara automatik.

Styling (CSS/SCSS)

Konfigurasi gaya webpack boleh menjadi rumit:

 {
  Ujian: /\.s?css$/,
  Gunakan: [MinicsSextractPlugin.Loader, "CSS-Loader", "Sass-Loader"]
},

// kemudian

MinicsSextractPlugin baru ({filename: "[name]-[contenthash] .css"}),

Vite menyokong CSS dan SCSS secara asli; Cukup pasang sass, dan Vite mengendalikan selebihnya.

Transpilation (TypeScript/JSX)

Webpack memerlukan transpilasi untuk TypeScript dan JSX:

 {
  Ujian: /\.(T|J)SX?$/,
  tidak termasuk: /node_modules /,
  Loader: "Babel-Loader"
},

... dengan konfigurasi Babel yang sepadan. Vite mengendalikan kotak-kotak ini, menyokong ciri-ciri JavaScript moden dan TypeScript. Plugin disediakan untuk sokongan penyemak imbas yang lebih lama.

Resolusi modul nod

Webpack memerlukan konfigurasi eksplisit untuk menyelesaikan node_modules :

 Selesaikan: {
  Modul: [path.resolve ("./ node_modules")]
}

Vite mengendalikan ini secara automatik.

Mod pengeluaran/pembangunan

Webpack sering menggunakan mode untuk membezakan antara persekitaran:

 Mod: ISProd? "Pengeluaran": "Pembangunan",

Vite menggunakan arahan berasingan ( vite for Development, vite build untuk pengeluaran).

Sambungan fail

Webpack sering memerlukan menentukan sambungan fail:

 Selesaikan: {
  Sambungan: [".ts", ".tsx", ".js"],
}

Vite secara automatik mengendalikan sambungan biasa.

Keserasian Rollup Plugin

Banyak plugin rollup serasi dengan Vite, memberikan peralihan yang lancar untuk plugin sedia ada. Rujuk dokumentasi Vite untuk maklumat keserasian.

Menyediakan projek Vite pertama anda

Untuk memindahkan projek yang sedia ada, mulakan dengan titik kemasukan HTML (misalnya, index.html ) merujuk fail entri JavaScript anda. Pasang plugin yang diperlukan (misalnya, @vitejs/plugin-react untuk projek React). Buat fail vite.config.ts :

 import {defineconfig} dari "Vite";
Import React dari "@vitejs/plugin-react";

Eksport DefinectonFig lalai ({
  Plugin: [React ()]
});

Tambahkan skrip NPM:

 "Dev": "Vite",
"Bina": "Vite Build",
"Pratonton": "Pratonton Vite",

Mulakan pelayan pembangunan dengan npm run dev .

Konfigurasi Lanjutan: alias, pembolehubah persekitaran, dan proksi

Alias

Alias ​​Webpack boleh direplikasi dalam Vite menggunakan resolve.alias :

 Selesaikan: {
  alias: {
    jscolor: path.resolve ("./ util/jscolor.js"),
    App: Path.Resolve ("./ App"),
    // ... lebih banyak alias
  }
},

Pembolehubah persekitaran

Vite menggunakan import.meta.env untuk pembolehubah persekitaran, biasanya diawali dengan VITE_ . Untuk projek warisan, plugin tersuai mungkin diperlukan untuk mengendalikan process.env yang ada.

Pelayan proxy

Untuk permintaan proksing untuk perkhidmatan backend semasa pembangunan:

 pelayan: {
  Proksi: {
    "/Graphql": "http: // localhost: 3001"
  }
}

Perpustakaan bangunan

Untuk membina perpustakaan, konfigurasikan pilihan build dalam vite.config.ts : (contoh yang ditinggalkan untuk keringkasan, tetapi serupa dengan contoh asal)

Kesimpulan

Vite menawarkan peningkatan yang ketara dalam pembangunan aplikasi web, menyediakan kelajuan dan kemudahan penggunaan. Ciri -ciri dan keserasiannya dengan plugin rollup menjadikan projek -projek sedia ada yang migrasi agak mudah.

Atas ialah kandungan terperinci Menambah Vite ke aplikasi web anda yang ada. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!