Meneroka Vite melalui kod sumbernya

Vite, Alat Membina Inovatif Evan You, adalah kerangka-agnostik, menyokong vue.js, react.js, svelte.js, dan javascript biasa. Artikel ini melangkaui gambaran keseluruhan permukaan, meneroka kod sumber Vite untuk memahami sistem templat dan pluginnya. Kami akan menjelaskan perbezaan antara templat dan plugin dan memeriksa bagaimana teras Vite berinteraksi dengan plugin.

Konsep Utama:

kerangka kebebasan kerangka Vite berpunca dari templat dan seni bina plugin, membolehkan penjanaan projek merentasi pelbagai kerangka.
Vite memanfaatkan rollup untuk penggabungan utama dan esbuild untuk keserasian modul dan pengoptimuman, menghasilkan kelajuan yang luar biasa.
Membuat projek Vite melibatkan memilih nama projek dan templat menggunakan alat
• . Templat khusus kerangka bergantung pada plugin yang sepadan, dibina menggunakan seni bina berasaskan cangkuk. create-vite

Membina aplikasi Vue dengan Vite: untuk menggambarkan, mari kita buat projek Vue:

(Menggunakan

<code class="language-bash">npm init vite@latest</code>

memastikan anda sentiasa mempunyai versi terbaru.) Sebagai alternatif, gunakan sworthand:

@latest

Ini dilancarkan

<code class="language-bash">npx create-vite</code>

, mendorong anda untuk nama projek dan templat. Pilih nama dan pilih sama ada "vanila" atau "vue" sebagai template.

create-vite

Meneroka kod sumber Vite:

Navigasi ke Repositori GitHub Vite (github.com/vitejs/vite) dan periksa direktori . (Dihapus) dan

adalah kunci.

menempatkan templat projek terbina dalam. Anda juga akan menemui direktori plugin untuk plugin terbina dalam. packages create-app create-vite Templat vs plugin: create-vite

Templat:

kod starter untuk projek baru. Terletak di dalam

, mereka menyediakan struktur fail khusus rangka kerja (mis.,
• , ). packages/create-vite template-vue template-vanilla

Plugin: Dayakan kerangka Vite Agnosticism. Ditemui dalam direktori

(mis.,

,
• ), mereka mengendalikan pemprosesan khusus kerangka. packages plugin-vue

  Templat sering menggunakan plugin. Contohnya, templat VUE memerlukan plugin @vitejs/plugin-vue untuk mengendalikan komponen vue tunggal (SFCS).

  Membandingkan package.json fail untuk template-vanilla dan template-vue mendedahkan kebergantungan ini:

  

  

  Termasuk

  , template-vue, dan vue, membolehkan sokongan VUE. @vitejs/plugin-vue bertindak sebagai jambatan antara teras Vite dan vue.js. @vue/compiler-sfc @vitejs/plugin-vue

  Plugin Vue:
  Mengendalikan bundling projek Vue, mewakilkan ke rollup melalui cangkuk. Cangkuk ini menentukan titik di mana kod plugin dijalankan.

  @vitejs/plugin-vue coretan dari

  menunjukkan pelaksanaan cangkuk:

  packages/plugin-vue/src/index.ts

  teras Vite (mis.,

  <code class="language-bash">npm init vite@latest</code>

  ) Menggunakan rollup, menggabungkan plugin ini.

  packages/vite/src/node/build.ts

  rollup vs. Esbuild:

  Vite menggunakan kedua-dua rollup (penggabungan utama) dan esbuild (transformasi modul dan pengoptimuman-"pra-bundling pergantungan"). Kelajuan Esbuild dalam Go menjadikannya sesuai untuk tugas kritikal prestasi ini.

  Ringkasan:

  Eksplorasi ini mendedahkan seni bina Vite: Menguruskan templat; Plugin khusus kerangka, menggunakan sistem berasaskan cangkuk, mengintegrasikan dengan teras Vite melalui Rollup, dengan pengendalian modul mengoptimumkan esbuild. Gabungan ini memberikan kelajuan dan fleksibiliti Vite.

  create-vite Soalan Lazim (Soalan Lazim):

  (FAQ asal sudah ditulis dengan baik dan komprehensif. Tiada perubahan diperlukan.)

Atas ialah kandungan terperinci Meneroka Vite melalui kod sumbernya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!