, geliştiriciler arasında giderek daha popüler hale geliyor, ancak topluluk o kadar büyük olmadığından ( gibi), sorunlarınızı çözmek için kendi özel eklentinizi oluşturmanız gerekebilir. Bu yazımızda için nasıl eklenti oluşturulacağını tartışacağız ve kendi eklentimi parçalayacağım. Vite Webpack'teki Vite Vite'ta Eklentiler Nasıl Çalışır? Bir eklenti oluşturmak için Vite'ın geliştirme sunucusu ( komutu) ve paket ( ) için farklı derleme sistemleri kullandığını bilmek önemlidir. vite vite build Geliştirme sunucusu için, modern tarayıcılar tarafından desteklenen yerel ES modüllerine sahip kullanıyor ve kodu tek bir dosyada toplamamıza gerek kalmıyor ve bu bize hızlı HRM (Sıcak Modül Değiştirme) sağlıyor. esbuild'i Paket için kullanıyor çünkü esnek ve geniş bir ekosisteme sahip; farklı çıktı formatlarıyla yüksek düzeyde optimize edilmiş üretim paketlerinin oluşturulmasına olanak tanır. rollup.js Vite'ın eklenti arayüzü Rollup'ınkine dayanmaktadır ancak geliştirme sunucusuyla çalışmak için ek seçenekler ve kancalar içerir. Temel Eklenti Oluşturma Bir eklenti oluşturduğunuzda, onu dosyanıza satır içi olarak yazabilirsiniz. Bunun için yeni bir paket oluşturmaya gerek yoktur. Bir eklentinin projelerinizde faydalı olduğunu gördüğünüzde onu toplulukla paylaşmayı ve Vite ekosistemine katkıda bulunmayı düşünün. vite.config.js Ayrıca, rollup.js daha büyük bir topluluğa ve ekosisteme sahip olduğundan, rollup.js için bir eklenti oluşturmayı düşünebilirsiniz; bu, Vite'ta da aynı şekilde çalışacaktır. Yani eğer eklenti işlevselliğiniz sadece bundle için çalışıyorsa Vite yerine rollup.js eklentisini tercih edebilirsiniz ve kullanıcılar rollup eklentinizi Vite projelerinde sorunsuzca kullanabilirler. Toplama için bir eklenti oluşturursanız yalnızca rollup.js kullanan daha fazla kullanıcıyı kapsayacaksınız. Eklentiniz geliştirme sunucusunu etkileyecekse Vite eklentisini tercih edin. Doğrudan dosyasında eklenti oluşturmaya başlayalım: vite.config.ts // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin { return { name: 'my-plugin', configResolved(config) { console.log(config); }, }; } export default defineConfig({ plugins: [ myPlugin(), ], }); Bu örnekte, her iki aşamada da konsolda çözümlenir çözülmez Vite yapılandırmasını yazdıran adında bir eklenti oluşturdum: geliştirme sunucusu ve paket. Config'i yalnızca geliştirme sunucusu modunda yazdırmak istersem, bundle için ve eklemeliyim. myPlugin apply: 'serve' apply: 'build' // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin { return { name: 'my-plugin', apply: 'serve', configResolved(config) { console.log(config); }, }; } export default defineConfig({ plugins: [ myPlugin(), ], }); Ayrıca bir dizi eklentiyi de iade edebilirim; geliştirme sunucusu ve paket için işlevleri ayırmak açısından kullanışlıdır: // vite.config.ts import { defineConfig, Plugin } from 'vite'; function myPlugin(): Plugin[] { return [ { name: 'my-plugin:serve', apply: 'serve', configResolved(config) { console.log('dev server:', config); }, }, { name: 'my-plugin:build', apply: 'build', configResolved(config) { console.log('bundle:', config); }, }, ]; } export default defineConfig({ plugins: [ myPlugin(), ], }); Ve hemen hemen bu kadar; Vite yapılandırmasına kolayca küçük eklentiler ekleyebilirsiniz. Bir eklenti çok büyürse, onu başka bir dosyaya taşımayı, hatta bir paket oluşturmayı tercih ederim. Daha karmaşık bir şeye ihtiyacınız varsa Vite'ın belgelerinde keşfedebileceğiniz birçok yararlı kanca vardır. Ancak örnek olarak aşağıda kendi eklentimi inceleyelim. Gerçek Bir Eklentiyi Çöktürmek Simge dosyalarına dayalı SVG sprite'ları oluşturmak için bir eklentim var - . vite-plugin-svg-spritemap Amaç, klasöründeki tüm simgeleri almak ve içeriklerini SVG sprite adı verilen tek bir dosyasında toplamaktır. Paket aşamasından başlayalım: src/icons .svg .svg import { Plugin, ResolvedConfig } from 'vite'; import path from 'path'; import fs from 'fs-extra'; function myPlugin(): Plugin { let config: ResolvedConfig; return { name: 'my-plugin:build', apply: 'build', async configResolved(_config) { config = _config; }, writeBundle() { const sprite = getSpriteContent({ pattern: 'src/icons/*.svg' }); const filePath = path.resolve(config.root, config.build.outDir, 'sprite.svg'); fs.ensureFileSync(filePath); fs.writeFileSync(filePath, sprite); }, }; } Hook sonraki kancalarda kullanmak üzere çözümlendiğinde config almamızı sağlar; configResolved kancası paketleme işlemi bittikten sonra çağrılır ve burada dosyasını oluşturacağım; writeBundle sprite.svg işlevi, desenine dayalı olarak hazırlanmış bir SVG sprite dizisi döndürür. Bu konuda daha derine inmeyeceğim; göz atabilirsiniz; getSpriteContent src/icons/*.svg SVG sprite oluşturma sürecinin tamamını açıklayan diğer makaleme Daha sonra, ile SVG hareketli grafik içeriğini yerleştirmek için dosyasının mutlak yolunu oluşturuyorum, ile dosyanın var olduğundan emin oluyorum (veya bir tane oluşturuyorum) ve SVG hareketli grafik içeriğini bu dosyaya yazıyorum. . path.resolve() sprite.svg fs.ensureFileSync Şimdi en ilginç kısıma gelelim: geliştirici sunucusu aşamasına. Burada kullanamıyorum ve dev sunucusu çalışırken dosyaları barındıramıyorum, bu nedenle isteğini yakalamak için sunucu ara yazılımını kullanmamız gerekiyor. writeBundle sprite.svg import { Plugin, ResolvedConfig } from 'vite'; function myPlugin(): Plugin { let config: ResolvedConfig; return { name: `my-plugin:serve`, apply: 'serve', async configResolved(_config) { config = _config; }, configureServer(server) { // (1) return () => { server.middlewares.use(async (req, res, next) => { // (2) if (req.url !== '/sprite.svg') { return next(); // (3) } const sprite = getSpriteContent({ pattern, prefix, svgo, currentColor }); res.writeHead(200, { // (4) 'Content-Type': 'image/svg+xml, charset=utf-8', 'Cache-Control': 'no-cache', }); res.end(sprite); }); }; }, }; } , dev sunucusunu yapılandırmak için kullanılan bir kancadır. Vite'ın dahili ara yazılımı kurulmadan önce tetiklenir; benim durumumda, dahili ara katman yazılımından sonra özel ara katman yazılımı eklemem gerekiyor, bu yüzden bir işlev döndürüyorum; configureServer Geliştirici sunucusuna gelen her isteği yakalamak amacıyla özel ara katman yazılımı eklemek için kullanıyorum. URL'sine sahip istekleri algılamasına ihtiyacım var, böylece dosya davranışını taklit edebilirim; server.middlewares.use() [localhost:3000/sprite.svg](http://localhost:3000/sprite.svg) İstek URL'si değilse - sonraki ara yazılıma geçin (yani kontrolü zincirdeki bir sonraki işleyiciye geçirin); /sprite.svg Dosya içeriğini hazırlamak için sonucunu değişkenine koyuyorum ve yapılandırılmış başlıklarla (içerik türü ve 200 HTTP durumu) yanıt olarak gönderiyorum. getSpriteContent sprite Sonuç olarak dosya davranışını simüle ettim. Ancak içindeki dosyalar değiştirilirse, silinirse veya eklenirse, aracılığıyla yeni hareketli grafik içeriği oluşturmak için sunucuyu yeniden başlatmalıyız; bunun için dosya izleme kütüphanesini kullanacağım - . Koda chokidar işleyicilerini ekleyelim: src/icons getSpriteContent chokidar import { Plugin, ResolvedConfig } from 'vite'; import chokidar from 'chokidar'; function myPlugin(): Plugin { let config: ResolvedConfig; let watcher: chokidar.FSWatcher; // Defined variable for chokidar instance. return { name: `my-plugin:serve`, apply: 'serve', async configResolved(_config) { config = _config; }, configureServer(server) { function reloadPage() { // Function that sends a signal to reload the server. server.ws.send({ type: 'full-reload', path: '*' }); } watcher = chokidar .watch('src/icons/*.svg', { // Watch src/icons/*.svg cwd: config.root, // Define project root path ignoreInitial: true, // Don't trigger chokidar on instantiation. }) .on('add', reloadPage) // Add listeners to add, modify, delete. .on('change', reloadPage) .on('unlink', reloadPage); return () => { server.middlewares.use(async (req, res, next) => { if (req.url !== '/sprite.svg') { return next(); } const sprite = getSpriteContent({ pattern, prefix, svgo, currentColor }); res.writeHead(200, { 'Content-Type': 'image/svg+xml, charset=utf-8', 'Cache-Control': 'no-cache', }); res.end(sprite); }); }; }, }; } Gördüğünüz gibi eklenti oluşturma API'si aslında karmaşık değil. Görevlerinize uyacak Vite veya Rollup kancalarını bulmanız yeterli. Örneğimde, Rollup.js'den kullanıyorum (dediğim gibi, paketi oluşturmak için kullanılıyor) ve Rollup.js'nin yerel geliştirici sunucusu desteği olmadığı için Vite'tan . writeBundle configureServer durumunda bu çok basitti; SVG sprite içeriğini aldık ve bir dosyaya koyduk. Geliştirici sunucusu durumunda, neden aynısını yapamadığım kafamı karıştırdı; Diğer yazarların eklentilerine baktım ve hepsi aynı şeyi yapıyor. writeBundle Bu nedenle, kullanıyorum ve argümanı aracılığıyla, isteğini engelleyerek dev sunucusuna gelen her isteği tetikleyen ara katman yazılımını ekliyorum. configureServer server sprite.svg Vite Hooks'u Kullanmak Daha önce de belirttiğim gibi daha kullanışlı eklentiler oluşturmak için kancaları keşfetmeniz gerekiyor. Bunlar belgelerde ayrıntılı olarak açıklanmaktadır: https://vitejs.dev/guide/api-plugin#universal-hooks https://vitejs.dev/guide/api-plugin#vite-spec-hooks Bir Eklentiye Nasıl Ad Verilir? Adlandırma açısından, Vite'ın eklentiler için bazı kuralları vardır, bu yüzden bitirmeden önce kontrol etsen iyi olur. İşte bazı önemli noktalar: Vite eklentilerinin, önekiyle benzersiz bir adı olmalıdır; vite-plugin- anahtar sözcüğünü package.json dosyasına ekleyin; vite-plugin Eklenti belgelerine neden bunun yalnızca Vite eklentisi olduğunu açıklayan bir bölüm ekleyin (örneğin, Vite'a özgü eklenti kancaları kullanır); Eklentiniz yalnızca belirli bir çerçeve için çalışacaksa, adını önekin bir parçası olarak ekleyin ( , , ). vite-plugin-vue- vite-plugin-react- vite-plugin-svelte- Eklentinizi Nasıl Yayınlayabilir ve Paylaşabilirsiniz? Eklentinizi NPM'de yayınlamaya karar verirseniz bunu öneririm çünkü bilgi ve uzmanlık paylaşımı, BT topluluğunun temel ilkesidir ve kolektif büyümeyi destekler. Paketinizi nasıl yayınlayacağınızı ve koruyacağınızı öğrenmek için rehberime göz atın → . NPM paketi oluşturmanın en kolay yolu Ayrıca eklentinizi vite'nin topluluk listesine - göndermenizi şiddetle tavsiye ederim. Birçok kişi orada en uygun eklentileri arıyor ve bu, Vite ekosistemine katkıda bulunmak için harika bir fırsat olacak! Eklentinizi buraya gönderme süreci basittir; yalnızca şartları karşıladığınızdan emin olun ve bir çekme isteği oluşturun. Terimlerin listesini bulabilirsiniz. harika-vite - burada Genel olarak, Vite'a özel (toplama değil), açık kaynak olması ve iyi belgelere sahip olması gerekir. Eklentilerinizde iyi şanslar!
