Modern web geli\u015ftirme d\u00fcnyas\u0131, s\u00fcrekli evrilen teknolojiler ve karma\u015f\u0131k ba\u011f\u0131ml\u0131l\u0131klarla dolu bir labirente benziyor. Bu labirentte yolumuzu bulmam\u0131z\u0131, projelerimizi d\u00fczenli tutmam\u0131z\u0131 ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131rmam\u0131z\u0131 sa\u011flayan temel ara\u00e7lardan biri de paket y\u00f6neticileridir. Peki, npm, Yarn, Bun ve Deno gibi farkl\u0131 paket y\u00f6neticileri ne i\u015fe yarar, birbirlerinden farklar\u0131 nelerdir ve \u00f6zellikle modern front-end geli\u015ftirmenin y\u0131ld\u0131zlar\u0131ndan Vite, bu ara\u00e7larla nas\u0131l bir uyum i\u00e7inde \u00e7al\u0131\u015f\u0131r? Gelin, bu kritik ara\u00e7lar\u0131n gizemli d\u00fcnyas\u0131na ad\u0131m atal\u0131m ve projeleriniz i\u00e7in en do\u011fru se\u00e7imi nas\u0131l yapabilece\u011finizi ke\u015ffedelim.<\/p>\n
Web geli\u015ftirme, \u00f6zellikle de JavaScript ekosistemi, inan\u0131lmaz bir h\u0131zla b\u00fcy\u00fcyor ve geli\u015fiyor. Eskiden basit HTML, CSS ve birka\u00e7 sat\u0131r JavaScript ile ba\u015flayan projeler, art\u0131k y\u00fczlerce hatta binlerce harici k\u00fct\u00fcphaneyi ve mod\u00fcl\u00fc i\u00e7erebiliyor. jQuery, React, Vue, Angular, Lodash, Moment.js ve daha niceleri… T\u00fcm bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 manuel olarak y\u00f6netmek, indirmek, do\u011fru s\u00fcr\u00fcmleri takip etmek ve projeye dahil etmek, k\u0131sa s\u00fcrede tam bir kabusa d\u00f6n\u00fc\u015febilir. \u0130\u015fte tam bu noktada “paket y\u00f6neticileri” devreye giriyor.<\/p>\n
Bir paket y\u00f6neticisi, yaz\u0131l\u0131m projelerinizin ihtiya\u00e7 duydu\u011fu t\u00fcm harici k\u00fct\u00fcphaneleri (paketleri) ve bu k\u00fct\u00fcphanelerin kendi ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 (ge\u00e7i\u015fli ba\u011f\u0131ml\u0131l\u0131klar) otomatik olarak kuran, g\u00fcncelleyen, kald\u0131ran ve y\u00f6neten bir ara\u00e7t\u0131r. T\u0131pk\u0131 bir k\u00fct\u00fcphanecinin kitaplar\u0131 d\u00fczenlemesi gibi, paket y\u00f6neticileri de kod k\u00fct\u00fcphanelerinizi d\u00fczenler ve size sadece projenize odaklanma imkan\u0131 sunar. Temel olarak, bir projenin d\u00fczg\u00fcn \u00e7al\u0131\u015fabilmesi i\u00e7in gerekli olan t\u00fcm “par\u00e7alar\u0131” sizin i\u00e7in temin eder.<\/p>\n
Bu ara\u00e7lar\u0131n temel i\u015flevleri aras\u0131nda \u015funlar bulunur:<\/p>\n
node_modules<\/code> klas\u00f6r\u00fcne yerle\u015ftirir.<\/li>\n- Ba\u011f\u0131ml\u0131l\u0131k \u00c7\u00f6z\u00fcmleme (Dependency Resolution):<\/strong> Bir paketin kendi i\u00e7inde ba\u015fka paketlere ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 varsa, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 da otomatik olarak bulur ve kurar. Bu, “ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131” olarak bilinen karma\u015f\u0131k bir yap\u0131y\u0131 y\u00f6netmeyi i\u00e7erir.<\/li>\n
- S\u00fcr\u00fcm Y\u00f6netimi (Version Management):<\/strong> Ba\u011f\u0131ml\u0131l\u0131klar\u0131n belirli s\u00fcr\u00fcmlerde kalmas\u0131n\u0131 sa\u011flar. Bu sayede farkl\u0131 geli\u015ftiriciler ayn\u0131 projede \u00e7al\u0131\u015f\u0131rken veya ayn\u0131 proje farkl\u0131 zamanlarda derlenirken tutarl\u0131l\u0131k sa\u011flan\u0131r.
package.json<\/code> dosyas\u0131nda belirtilen s\u00fcr\u00fcm aral\u0131klar\u0131na g\u00f6re \u00e7al\u0131\u015f\u0131r.<\/li>\n- G\u00fcncelleme (Updating):<\/strong> Ba\u011f\u0131ml\u0131l\u0131klar\u0131n yeni s\u00fcr\u00fcmlerini g\u00fcvenli bir \u015fekilde indirmenizi ve entegre etmenizi sa\u011flar.<\/li>\n
- Kald\u0131rma (Uninstallation):<\/strong> Art\u0131k ihtiya\u00e7 duyulmayan paketleri projeden temizler.<\/li>\n
- Komut \u00c7al\u0131\u015ft\u0131rma (Script Execution):<\/strong> Projenizde tan\u0131mlanan \u00f6zel komut dosyalar\u0131n\u0131 (\u00f6rne\u011fin testleri \u00e7al\u0131\u015ft\u0131rmak, projeyi derlemek) \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r.<\/li>\n<\/ul>\n
Her JavaScript projesinin kalbinde yer alan iki \u00f6nemli dosya veya klas\u00f6r vard\u0131r: package.json<\/code> ve node_modules<\/code>. package.json<\/code> dosyas\u0131, projenizin bir nevi kimlik kart\u0131d\u0131r. Projenin ad\u0131, s\u00fcr\u00fcm\u00fc, a\u00e7\u0131klamas\u0131 gibi meta verilerin yan\u0131 s\u0131ra, en \u00f6nemlisi, projenin t\u00fcm do\u011frudan ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 ve geli\u015ftirme ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 (\u00f6rne\u011fin test \u00e7at\u0131s\u0131, bundler) listeler. Bir paketi kurdu\u011funuzda, bu dosya otomatik olarak g\u00fcncellenir.<\/p>\n\n Uzman \u0130pucu: package.json<\/code> dosyas\u0131ndaki s\u00fcr\u00fcm notasyonlar\u0131n\u0131 (\u00f6rne\u011fin ^1.0.0<\/code>, ~1.0.0<\/code>) iyi anlamak, ba\u011f\u0131ml\u0131l\u0131k g\u00fcncellemelerinde beklenmedik k\u0131r\u0131lmalar\u0131 \u00f6nlemenin anahtar\u0131d\u0131r. ^<\/code> sembol\u00fc, major s\u00fcr\u00fcm\u00fc sabit tutarak minor ve patch g\u00fcncellemelerine izin verirken, ~<\/code> sadece patch g\u00fcncellemelerine izin verir.\n <\/div>\n\u00d6te yandan, node_modules<\/code> klas\u00f6r\u00fc, t\u00fcm kurulu paketlerin fiziksel olarak depoland\u0131\u011f\u0131 yerdir. Bu klas\u00f6r genellikle olduk\u00e7a b\u00fcy\u00fck olabilir ve projeyi payla\u015ft\u0131\u011f\u0131n\u0131zda Git gibi s\u00fcr\u00fcm kontrol sistemlerine dahil edilmez (bu nedenle .gitignore<\/code> dosyas\u0131na eklenir). Bunun yerine, ba\u015fka bir geli\u015ftirici projenizi klonlad\u0131\u011f\u0131nda, package.json<\/code> dosyas\u0131na bakarak t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 tekrar kurar. Bu, projelerin hafif kalmas\u0131n\u0131 ve ta\u015f\u0131nabilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nPaket y\u00f6neticileri olmasayd\u0131, her bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n her bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n\u0131 tek tek takip etmek, s\u00fcr\u00fcm uyumsuzluklar\u0131yla u\u011fra\u015fmak ve g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 manuel olarak kontrol etmek zorunda kal\u0131rd\u0131k. Bu da geli\u015ftirme s\u00fcrecini dayan\u0131lmaz derecede yava\u015flat\u0131r ve hata olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131rd\u0131. Dolay\u0131s\u0131yla, modern web geli\u015ftirme altyap\u0131s\u0131n\u0131n temel direklerinden biri olarak paket y\u00f6neticileri, geli\u015ftiricilere zaman kazand\u0131r\u0131r, projelerde tutarl\u0131l\u0131\u011f\u0131 sa\u011flar ve daha g\u00fcvenli bir geli\u015ftirme ortam\u0131 sunar.<\/p>\n
npm: JavaScript Ekosisteminin K\u00f6kl\u00fc Y\u00f6neticisi Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n
JavaScript ekosisteminin en k\u00f6kl\u00fc ve yayg\u0131n olarak kullan\u0131lan paket y\u00f6neticisi \u015f\u00fcphesiz npm (Node Package Manager)’dir. 2010 y\u0131l\u0131nda Node.js ile birlikte do\u011fan npm, geli\u015ftiricilerin JavaScript mod\u00fcllerini kolayca payla\u015fmas\u0131na ve kullanmas\u0131na olanak tan\u0131yarak Node.js’in ve genel olarak JavaScript’in bug\u00fcnk\u00fc pop\u00fclaritesine ula\u015fmas\u0131nda kritik bir rol oynam\u0131\u015ft\u0131r. Merkezi bir paket deposu olan npm Registry, milyonlarca a\u00e7\u0131k kaynak paketi bar\u0131nd\u0131r\u0131r ve d\u00fcnyan\u0131n en b\u00fcy\u00fck yaz\u0131l\u0131m kay\u0131tlar\u0131ndan biridir.<\/p>\n
npm’in \u00e7al\u0131\u015fma prensibi olduk\u00e7a basittir ancak arkas\u0131nda karma\u015f\u0131k bir ba\u011f\u0131ml\u0131l\u0131k \u00e7\u00f6z\u00fcmleme mekanizmas\u0131 yatar. Bir projeye yeni bir paket eklemek istedi\u011finizde, npm Registry’ye bir istek g\u00f6nderir, paketi ve onun ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 indirir ve projenizin node_modules<\/code> dizinine yerle\u015ftirir. Ayn\u0131 zamanda, projenizin package.json<\/code> dosyas\u0131n\u0131 g\u00fcnceller ve kurulan paket hakk\u0131nda bilgi ekler.<\/p>\nTemel npm komutlar\u0131, bir geli\u015ftiricinin g\u00fcnl\u00fck i\u015f ak\u0131\u015f\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r:<\/p>\n
\nnpm init -y\n<\/pre>\n<\/code><\/p>\n
Bu komut, yeni bir Node.js projesi ba\u015flat\u0131r ve varsay\u0131lan de\u011ferlerle bir package.json<\/code> dosyas\u0131 olu\u015fturur. -y<\/code> bayra\u011f\u0131, t\u00fcm sorulara otomatik olarak \"evet\" yan\u0131t\u0131 vermeyi sa\u011flar.<\/p>\n\nnpm install [paket-ad\u0131]\nnpm i [paket-ad\u0131] --save-dev\n<\/pre>\n<\/code><\/p>\n
Bu komutlar, projenize bir ba\u011f\u0131ml\u0131l\u0131k eklemenizi sa\u011flar. \u0130lk \u00f6rnek, ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 dependencies<\/code> b\u00f6l\u00fcm\u00fcne eklerken, --save-dev<\/code> bayra\u011f\u0131 ile kullan\u0131lan ikinci \u00f6rnek, paketi yaln\u0131zca geli\u015ftirme ortam\u0131nda kullan\u0131lan bir ara\u00e7 olarak devDependencies<\/code> b\u00f6l\u00fcm\u00fcne kaydeder (\u00f6rne\u011fin, test \u00e7at\u0131s\u0131, derleyici).<\/p>\n\nnpm run [script-ad\u0131]\n<\/pre>\n<\/code><\/p>\n
Bu komut, package.json<\/code> dosyas\u0131n\u0131n scripts<\/code> b\u00f6l\u00fcm\u00fcnde tan\u0131mlanm\u0131\u015f \u00f6zel komut dosyalar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir \"start\" veya \"build\" komutu olabilir.<\/p>\nnpm'in en \u00f6nemli \u00f6zelliklerinden biri de package-lock.json<\/code> dosyas\u0131d\u0131r. Bu dosya, node_modules<\/code> klas\u00f6r\u00fcndeki her bir ba\u011f\u0131ml\u0131l\u0131\u011f\u0131n tam ve deterministik bir a\u011fac\u0131n\u0131 kaydeder. Yani, her bir paketin tam s\u00fcr\u00fcm\u00fcn\u00fc, indirme URL'sini ve karma (hash) de\u011ferini i\u00e7erir. Bu sayede, projenizi klonlayan veya farkl\u0131 bir ortamda \u00e7al\u0131\u015ft\u0131ran herkes, ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131 elde eder. Bu, \"\u00e7al\u0131\u015ft\u0131 bende ama sende \u00e7al\u0131\u015fm\u0131yor\" sorunlar\u0131n\u0131 ortadan kald\u0131rmaya yard\u0131mc\u0131 olan kritik bir g\u00fcvenlik ve tutarl\u0131l\u0131k katman\u0131d\u0131r. npm@5 ve sonraki s\u00fcr\u00fcmlerle birlikte otomatik olarak olu\u015fturulur ve g\u00fcncellenir.<\/p>\nVaka Analizi: Bir React Projesinde npm Kullan\u0131m\u0131<\/h3>\n
Bir React projesi geli\u015ftirdi\u011fimizi varsayal\u0131m. create-react-app<\/code> gibi bir ara\u00e7la projemizi ba\u015flatt\u0131\u011f\u0131m\u0131zda, arka planda npm, React'in kendisi, ReactDOM, Babel, Webpack (eski s\u00fcr\u00fcmlerde) gibi temel ba\u011f\u0131ml\u0131l\u0131klar\u0131 otomatik olarak kurar. Diyelim ki projemize bir y\u00f6nlendirme k\u00fct\u00fcphanesi olan React Router'\u0131 eklemek istiyoruz:<\/p>\n\nnpm install react-router-dom\n<\/pre>\n<\/code><\/p>\n
Bu komut \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, npm \u015funlar\u0131 yapar:<\/p>\n
\n- npm Registry'den
react-router-dom<\/code> paketinin en son kararl\u0131 s\u00fcr\u00fcm\u00fcn\u00fc (veya package.json<\/code>'da belirtilen aral\u0131\u011fa uyan s\u00fcr\u00fcm\u00fc) ve onun ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 (\u00f6rne\u011fin history<\/code>, react-is<\/code>) indirir.<\/li>\n- \u0130ndirilen t\u00fcm paketleri projenizin
node_modules<\/code> klas\u00f6r\u00fcne yerle\u015ftirir.<\/li>\npackage.json<\/code> dosyas\u0131ndaki dependencies<\/code> b\u00f6l\u00fcm\u00fcne react-router-dom<\/code> girdisini ekler ve s\u00fcr\u00fcm\u00fcn\u00fc belirtir.<\/li>\npackage-lock.json<\/code> dosyas\u0131n\u0131 g\u00fcncelleyerek, react-router-dom<\/code> ve t\u00fcm ge\u00e7i\u015fli ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131n tam s\u00fcr\u00fcmlerini, ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131 ve hash de\u011ferlerini kaydeder.<\/li>\n<\/ol>\nDaha sonra, projemizi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in package.json<\/code> dosyas\u0131nda tan\u0131ml\u0131 olan bir komutu kullan\u0131r\u0131z:<\/p>\n\n\/\/ package.json\n{\n \"name\": \"my-react-app\",\n \"version\": \"0.1.0\",\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"react-router-dom\": \"^6.21.1\"\n }\n}\n<\/pre>\n<\/code><\/p>\n
<\/pre>\n<\/code>
\nnpm run start
\n<\/code><\/p>\n
Bu komut, react-scripts<\/code> paketinin start<\/code> script'ini \u00e7al\u0131\u015ft\u0131rarak React uygulaman\u0131z\u0131n geli\u015ftirme sunucusunu ba\u015flat\u0131r. npm, sadece bir paket y\u00f6neticisi olman\u0131n \u00f6tesinde, ayn\u0131 zamanda bir komut \u00e7al\u0131\u015ft\u0131r\u0131c\u0131 olarak da hizmet vererek geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131 b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir. npm, basitli\u011fi, yayg\u0131n kullan\u0131m\u0131 ve geni\u015f paket ekosistemi sayesinde JavaScript projeleri i\u00e7in varsay\u0131lan bir se\u00e7im olmaya devam etmektedir. Ancak, zamanla ortaya \u00e7\u0131kan performans, g\u00fcvenlik ve determinizm sorunlar\u0131, Yarn gibi alternatiflerin do\u011fu\u015funa zemin haz\u0131rlam\u0131\u015ft\u0131r.<\/p>\nYarn: npm'e H\u0131zl\u0131 ve G\u00fcvenilir Bir Alternatif Nas\u0131l Do\u011fdu?<\/h2>\n
npm, JavaScript ekosisteminde devrim yaratsa da, b\u00fcy\u00fck \u00f6l\u00e7ekli projelerde veya karars\u0131z a\u011f ba\u011flant\u0131lar\u0131nda baz\u0131 sorunlarla kar\u015f\u0131la\u015f\u0131yordu. \u00d6zellikle ba\u011f\u0131ml\u0131l\u0131k kurulum s\u00fcrelerinin uzun olmas\u0131, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131n zaman zaman ortaya \u00e7\u0131kmas\u0131 ve bazen farkl\u0131 ortamlarda ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131n \u00fcretilememesi (determinizm eksikli\u011fi) gibi konular geli\u015ftiricileri rahats\u0131z ediyordu. \u0130\u015fte tam bu sorunlara \u00e7\u00f6z\u00fcm bulmak amac\u0131yla Facebook (\u015fimdiki Meta) taraf\u0131ndan 2016 y\u0131l\u0131nda Yarn geli\u015ftirildi.<\/p>\n
Yarn, \"Yet Another Resource Negotiator\" k\u0131saltmas\u0131yla, npm Registry ile uyumlu \u00e7al\u0131\u015facak \u015fekilde tasarland\u0131, yani ayn\u0131 paketleri kullanabiliyordu. Ancak kendi benzersiz kurulum ve \u00e7\u00f6z\u00fcmleme algoritmalar\u0131yla \u00f6ne \u00e7\u0131kt\u0131. Yarn'\u0131n temel felsefesi, daha h\u0131zl\u0131, daha g\u00fcvenli ve daha deterministik bir paket y\u00f6netimi deneyimi sunmakt\u0131. Bu hedefe ula\u015fmak i\u00e7in \u00e7e\u015fitli yenilik\u00e7i \u00f6zellikler getirdi:<\/p>\n
\n- Paralel Kurulum (Parallel Installation):<\/strong> npm paketleri s\u0131rayla kurarken, Yarn bir\u00e7ok paketi ayn\u0131 anda paralel olarak indirebilir ve kurabilir. Bu, \u00f6zellikle \u00e7ok say\u0131da ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 olan projelerde kurulum s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/li>\n
- \u00c7evrimd\u0131\u015f\u0131 \u00d6nbellekleme (Offline Cache):<\/strong> Yarn, daha \u00f6nce indirdi\u011fi paketleri yerel bir \u00f6nbellekte saklar. Bu sayede, ayn\u0131 paketler tekrar kurulmak istendi\u011finde internet ba\u011flant\u0131s\u0131na ihtiya\u00e7 duymadan do\u011frudan \u00f6nbellekten \u00e7ekilebilir. Bu, \u00f6zellikle internet ba\u011flant\u0131s\u0131 yava\u015f veya kesintili olan geli\u015ftiriciler i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/li>\n
- Deterministik Ba\u011f\u0131ml\u0131l\u0131k A\u011fac\u0131 (Deterministic Dependency Tree):<\/strong> npm'in
package-lock.json<\/code> dosyas\u0131na benzer \u015fekilde, Yarn da kendi yarn.lock<\/code> dosyas\u0131n\u0131 kullan\u0131r. Ancak Yarn, ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurarken daha kat\u0131 bir algoritma izler. Bu, farkl\u0131 geli\u015ftirme ortamlar\u0131nda veya farkl\u0131 zamanlarda bile her zaman ayn\u0131 ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131n\u0131n \u00fcretilece\u011fini garanti eder, bu da \"\u00e7al\u0131\u015ft\u0131 bende ama sende \u00e7al\u0131\u015fm\u0131yor\" durumlar\u0131n\u0131 minimize eder.<\/li>\n- G\u00fcvenlik (Security):<\/strong> Yarn, indirilen paketlerin b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flamak i\u00e7in karma (checksum) kontrolleri yapar. Bu, paketlerin indirme s\u0131ras\u0131nda manip\u00fcle edilmedi\u011finden veya bozulmad\u0131\u011f\u0131ndan emin olmaya yard\u0131mc\u0131 olur.<\/li>\n
- Workspaces (\u00c7al\u0131\u015fma Alanlar\u0131):<\/strong> Monorepo yap\u0131s\u0131ndaki projeler i\u00e7in geli\u015ftirilen bu \u00f6zellik, birden fazla projenin tek bir depo i\u00e7inde y\u00f6netilmesini sa\u011flar. Yarn workspaces, ba\u011f\u0131ml\u0131l\u0131klar\u0131 merkezi olarak y\u00f6netir ve her bir alt proje i\u00e7in ayr\u0131 ayr\u0131
node_modules<\/code> klas\u00f6rleri olu\u015fturmak yerine, ba\u011f\u0131ml\u0131l\u0131klar\u0131 ana deponun k\u00f6k\u00fcnde tek bir node_modules<\/code> i\u00e7inde payla\u015farak disk alan\u0131ndan tasarruf sa\u011flar ve kurulum s\u00fcrelerini daha da h\u0131zland\u0131r\u0131r.<\/li>\n<\/ul>\nYarn'\u0131n komutlar\u0131 npm'e olduk\u00e7a benzerdir, bu da npm kullan\u0131c\u0131lar\u0131n\u0131n kolayca ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flam\u0131\u015ft\u0131r:<\/p>\n
\nyarn init -y\nyarn add [paket-ad\u0131]\nyarn add [paket-ad\u0131] --dev\nyarn remove [paket-ad\u0131]\nyarn upgrade\nyarn start\n<\/pre>\n<\/code><\/p>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, install<\/code> yerine add<\/code>, run<\/code> yerine do\u011frudan script ad\u0131 gibi k\u00fc\u00e7\u00fck farklar d\u0131\u015f\u0131nda, temel i\u015flevsellik ayn\u0131d\u0131r. yarn.lock<\/code> dosyas\u0131 da package-lock.json<\/code> gibi versiyon kontrol sistemlerine dahil edilir ve projenin ba\u011f\u0131ml\u0131l\u0131k durumunu sabitlemeye yarar.<\/p>\nVaka Analizi: B\u00fcy\u00fck \u00d6l\u00e7ekli Bir Monorepo'da Yarn Workspaces Kullan\u0131m\u0131<\/h3>\n
B\u00fcy\u00fck bir kurumsal projede, birden fazla front-end uygulamas\u0131 (\u00f6rne\u011fin, bir m\u00fc\u015fteri portal\u0131, bir y\u00f6netici paneli) ve ortak kullan\u0131lan UI bile\u015fenleri k\u00fct\u00fcphanesi gibi farkl\u0131 paketlerin tek bir Git deposunda (monorepo) y\u00f6netildi\u011fini d\u00fc\u015f\u00fcnelim. Bu senaryoda Yarn Workspaces, geli\u015ftirme deneyimini inan\u0131lmaz derecede kolayla\u015ft\u0131r\u0131r.<\/p>\n
Monorepo'nun k\u00f6k\u00fcndeki package.json<\/code> dosyas\u0131na workspaces<\/code> alan\u0131 eklenir:<\/p>\n\n\/\/ root\/package.json\n{\n \"name\": \"my-monorepo\",\n \"private\": true,\n \"workspaces\": [\n \"packages\/*\",\n \"apps\/*\"\n ],\n \"scripts\": {\n \"install\": \"yarn\",\n \"build:all\": \"yarn workspaces run build\"\n }\n}\n<\/pre>\n<\/code><\/p>\n
Bu yap\u0131land\u0131rma, Yarn'a packages<\/code> ve apps<\/code> klas\u00f6rlerinin i\u00e7indeki her bir alt dizini ayr\u0131 bir \u00e7al\u0131\u015fma alan\u0131 olarak tan\u0131mas\u0131n\u0131 s\u00f6yler. Art\u0131k, monorepo'nun k\u00f6k dizininde yarn install<\/code> \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, Yarn t\u00fcm \u00e7al\u0131\u015fma alanlar\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 tek bir node_modules<\/code> klas\u00f6r\u00fcne (k\u00f6k dizinde) kurar ve ba\u011f\u0131ml\u0131l\u0131k \u00e7ak\u0131\u015fmalar\u0131n\u0131 ak\u0131ll\u0131ca y\u00f6netir.<\/p>\nDiyelim ki packages\/ui-library<\/code> alt\u0131nda geli\u015ftirilen bir bile\u015fen k\u00fct\u00fcphanemiz var ve apps\/customer-portal<\/code> bu k\u00fct\u00fcphaneyi kullan\u0131yor. Workspaces sayesinde, customer-portal<\/code> projesi, ui-library<\/code>'yi sanki npm Registry'den geliyormu\u015f gibi do\u011frudan i\u00e7e aktarabilir, ancak asl\u0131nda ayn\u0131 depodaki yerel bir paketi kullan\u0131r. Bu, geli\u015ftirme s\u0131ras\u0131nda de\u011fi\u015fikliklerin an\u0131nda di\u011fer \u00e7al\u0131\u015fma alanlar\u0131na yans\u0131mas\u0131n\u0131 sa\u011flar ve yay\u0131nlama\/ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi karma\u015fas\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/p>\nYarn'\u0131n Workspaces \u00f6zelli\u011fi, b\u00fcy\u00fck ve karma\u015f\u0131k projelerin y\u00f6netimini basitle\u015ftirerek, \u00f6zellikle monorepo mimarilerinde geli\u015ftiricilere \u00f6nemli verimlilik art\u0131\u015flar\u0131 sa\u011flam\u0131\u015ft\u0131r. Bu yenilikler, npm'i de kendi \u00f6zelliklerini geli\u015ftirmeye itmi\u015f ve npm@7 ile birlikte benzer bir workspaces<\/code> \u00f6zelli\u011fi sunulmu\u015ftur. Rekabet, her zaman daha iyi ara\u00e7lar\u0131n ortaya \u00e7\u0131kmas\u0131na yol a\u00e7m\u0131\u015ft\u0131r.<\/p>\nBun: Yeni Nesil JavaScript Runtime ve Paket Y\u00f6neticisi Ne Vaat Ediyor?<\/h2>\n
JavaScript ekosistemi hi\u00e7 durmuyor ve yenilikler pe\u015f pe\u015fe geliyor. Bu yeniliklerin en heyecan vericilerinden biri de Bun'd\u0131r. 2022'de ilk kez duyurulan Bun, sadece bir paket y\u00f6neticisi de\u011fil, ayn\u0131 zamanda bir JavaScript runtime'\u0131, bir bundler (derleyici) ve bir test runner'd\u0131r. K\u0131sacas\u0131, Node.js ve hatta Deno'nun sundu\u011fu her \u015feyi tek bir pakette, ancak \u00e7ok daha y\u00fcksek performansla sunmay\u0131 hedefleyen iddial\u0131 bir projedir.<\/p>\n
Bun'\u0131n en \u00e7arp\u0131c\u0131 \u00f6zelli\u011fi h\u0131z\u0131d\u0131r. Zig programlama dilinde yaz\u0131lm\u0131\u015f olmas\u0131 ve d\u00fc\u015f\u00fck seviyeli optimizasyonlar\u0131 sayesinde, npm ve Yarn gibi mevcut paket y\u00f6neticilerine k\u0131yasla ba\u011f\u0131ml\u0131l\u0131k kurulumunda ve script \u00e7al\u0131\u015ft\u0131rmada kat kat daha h\u0131zl\u0131 oldu\u011fu iddia edilmektedir. Bu h\u0131z fark\u0131, \u00f6zellikle b\u00fcy\u00fck projelerde geli\u015ftirici deneyimini k\u00f6kten de\u011fi\u015ftirebilir.<\/p>\n
Bun'\u0131n vaat ettikleri \u015funlar\u0131 i\u00e7erir:<\/p>\n
\n- Ultra H\u0131zl\u0131 Paket Y\u00f6neticisi:<\/strong> Zig'in performans\u0131 ve kendi geli\u015ftirdi\u011fi dahili mod\u00fcl \u00e7\u00f6z\u00fcmleme algoritmas\u0131 sayesinde
bun install<\/code> komutu, npm veya Yarn'a g\u00f6re \u00e7ok daha h\u0131zl\u0131d\u0131r. Disk I\/O ve a\u011f i\u015flemlerini optimize eder.<\/li>\n- JavaScript & TypeScript Runtime:<\/strong> Node.js gibi, sunucu taraf\u0131nda JavaScript ve TypeScript kodunu \u00e7al\u0131\u015ft\u0131rabilir. V8 motoru yerine, daha h\u0131zl\u0131 bir JavaScript motoru olan JavaScriptCore'u kullan\u0131r.<\/li>\n
- Yerle\u015fik Bundler:<\/strong> Vite veya Webpack gibi harici bir bundler'a ihtiya\u00e7 duymadan JavaScript, TypeScript ve JSX dosyalar\u0131n\u0131 do\u011frudan birle\u015ftirebilir ve optimize edebilir.<\/li>\n
- Test Runner:<\/strong> Entegre bir test ko\u015fucusu i\u00e7erir, bu sayede Jest veya Vitest gibi ayr\u0131 test k\u00fct\u00fcphanelerine gerek kalmadan testlerinizi \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/li>\n
- Web API'leri Deste\u011fi:<\/strong> Fetch API, WebSockets gibi modern web API'lerini do\u011frudan destekleyerek taray\u0131c\u0131 ve sunucu ortamlar\u0131 aras\u0131nda daha tutarl\u0131 bir geli\u015ftirme deneyimi sunar.<\/li>\n
- npm\/Yarn Uyumlulu\u011fu:<\/strong> Mevcut npm ve Yarn projeleriyle sorunsuz bir \u015fekilde \u00e7al\u0131\u015fabilir.
package.json<\/code> ve node_modules<\/code> yap\u0131s\u0131n\u0131 tan\u0131r ve kullan\u0131r.<\/li>\n<\/ul>\nBun'\u0131n komutlar\u0131 da di\u011fer paket y\u00f6neticilerine benzerlik g\u00f6sterir, ancak genellikle bun<\/code> \u00f6n ekiyle ba\u015flar:<\/p>\n\nbun init\nbun install\nbun add [paket-ad\u0131]\nbun remove [paket-ad\u0131]\nbun run [script-ad\u0131]\nbun build .\/src\/index.ts --outdir .\/dist\nbun test\n<\/pre>\n<\/code><\/p>\n
Bu komut seti, bir geli\u015ftiricinin bir JavaScript projesini ba\u015flatmak, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmek, kodu derlemek ve test etmek i\u00e7in ihtiya\u00e7 duyaca\u011f\u0131 neredeyse t\u00fcm ara\u00e7lar\u0131 tek bir CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) alt\u0131nda toplar. Bun, \u00f6zellikle ba\u015flang\u0131\u00e7 s\u00fcrelerini k\u0131saltmay\u0131 ve geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fc h\u0131zland\u0131rmay\u0131 hedefleyerek, modern geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 \"kurulum yorgunlu\u011fu\" sorununa radikal bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
Vaka Analizi: Yeni Bir Projede Bun ile Ba\u015flang\u0131\u00e7 ve Performansa Etkileri<\/h3>\n
Yeni bir React veya Vue projesi ba\u015flatmak istedi\u011finizi ve h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 pe\u015finde oldu\u011funuzu varsayal\u0131m. Geleneksel olarak npm create vite<\/code> veya yarn create vite<\/code> kullan\u0131rd\u0131n\u0131z, ard\u0131ndan ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurmak i\u00e7in npm install<\/code> veya yarn install<\/code> \u00e7al\u0131\u015ft\u0131r\u0131rd\u0131n\u0131z. Bun ile bu s\u00fcre\u00e7 daha da basitle\u015febilir ve h\u0131zlanabilir:<\/p>\n\nbun create vite my-bun-app --template react-ts\ncd my-bun-app\nbun install\nbun dev\n<\/pre>\n<\/code><\/p>\n
Burada bun create vite<\/code> komutu, Vite projesi olu\u015fturma i\u015flemini Bun \u00fczerinden ger\u00e7ekle\u015ftirir. Ard\u0131ndan gelen bun install<\/code> komutu, projenin package.json<\/code> dosyas\u0131ndaki ba\u011f\u0131ml\u0131l\u0131klar\u0131 npm veya Yarn'a g\u00f6re g\u00f6zle g\u00f6r\u00fcl\u00fcr \u015fekilde daha h\u0131zl\u0131 bir \u015fekilde kurar. Bir\u00e7ok geli\u015ftirici, ilk kurulumda saniyelerden dakikalara kadar de\u011fi\u015fen farklar g\u00f6zlemlemi\u015ftir. \u00d6rne\u011fin, b\u00fcy\u00fck bir ba\u011f\u0131ml\u0131l\u0131k a\u011fac\u0131na sahip bir projede npm install<\/code> 30 saniye s\u00fcrerken, bun install<\/code> sadece 3-5 saniyede tamamlanabilir.<\/p>\nDaha da \u00f6nemlisi, bun run dev<\/code> (veya bun dev<\/code>) komutu, Vite geli\u015ftirme sunucusunu ba\u015flat\u0131rken, Node.js tabanl\u0131 muadillerine g\u00f6re daha h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 ve yeniden y\u00fckleme s\u00fcreleri sunabilir. Bun, t\u00fcm bu ara\u00e7lar\u0131 tek bir ikili dosyada birle\u015ftirerek, geli\u015ftirme ortam\u0131n\u0131n genel \"ayak izini\" k\u00fc\u00e7\u00fclt\u00fcr ve geli\u015ftiricinin daha az ara\u00e7 kurulumu ve y\u00f6netimiyle u\u011fra\u015fmas\u0131n\u0131 sa\u011flar. Bu, \u00f6zellikle yeni ba\u015flayanlar veya \u00e7ok say\u0131da farkl\u0131 proje \u00fczerinde \u00e7al\u0131\u015fan geli\u015ftiriciler i\u00e7in \u00f6nemli bir avantajd\u0131r. Bun hala nispeten yeni bir ara\u00e7 olsa da, sundu\u011fu performans ve entegrasyon vaatleri sayesinde JavaScript ekosisteminin gelece\u011finde \u00f6nemli bir yer edinmeye adayd\u0131r.<\/p>\nDeno: G\u00fcvenli ve Tamamen T\u00fcmle\u015fik Bir Ortam Olarak Nas\u0131l Fark Yarat\u0131r?<\/h2>\n
Node.js'in yarat\u0131c\u0131s\u0131 Ryan Dahl, 2018 y\u0131l\u0131nda Node.js'teki baz\u0131 tasar\u0131m kararlar\u0131ndan duydu\u011fu pi\u015fmanl\u0131klar\u0131 dile getirdi\u011fi \"10 Things I Regret About Node.js\" ba\u015fl\u0131kl\u0131 konu\u015fmas\u0131yla Deno'yu tan\u0131tt\u0131. Deno (Node'un anagram\u0131), Node.js'in zay\u0131f y\u00f6nlerini gidermeyi ve modern web standartlar\u0131na daha uygun, g\u00fcvenli ve t\u00fcmle\u015fik bir JavaScript\/TypeScript runtime ortam\u0131 sunmay\u0131 hedefliyordu.<\/p>\n
Deno, ba\u015flang\u0131c\u0131ndan itibaren Node.js'ten farkl\u0131 bir felsefeyle hareket etti:<\/p>\n
\n- G\u00fcvenlik Odakl\u0131:<\/strong> Deno, varsay\u0131lan olarak g\u00fcvenlidir. Dosya sistemi eri\u015fimi, a\u011f eri\u015fimi, ortam de\u011fi\u015fkenleri ve alt s\u00fcre\u00e7 \u00e7al\u0131\u015ft\u0131rma gibi i\u015flemleri ger\u00e7ekle\u015ftirmek i\u00e7in a\u00e7\u0131k izinler gerektirir. Bu, zararl\u0131 kodlar\u0131n istem d\u0131\u015f\u0131 \u00e7al\u0131\u015fmas\u0131n\u0131 engeller ve daha kontroll\u00fc bir geli\u015ftirme ortam\u0131 sunar. \u00d6rne\u011fin, bir sunucu uygulamas\u0131n\u0131n sadece belirli bir porta eri\u015fmesine izin verebilirsiniz.<\/li>\n
- TypeScript Deste\u011fi (Yerle\u015fik):<\/strong> Deno, TypeScript'i kutudan \u00e7\u0131kar \u00e7\u0131kmaz (out-of-the-box) destekler, ek bir derleme ad\u0131m\u0131na veya yap\u0131land\u0131rmaya ihtiya\u00e7 duymazs\u0131n\u0131z. Bu, TypeScript'i seven geli\u015ftiriciler i\u00e7in b\u00fcy\u00fck bir kolayl\u0131kt\u0131r.<\/li>\n
- URL Tabanl\u0131 Mod\u00fcl Y\u00f6netimi:<\/strong> Deno'nun belki de en radikal fark\u0131, paket y\u00f6neticisi olmamas\u0131d\u0131r. Mod\u00fclleri npm Registry gibi merkezi bir depodan indirmek yerine, do\u011frudan URL'ler arac\u0131l\u0131\u011f\u0131yla i\u00e7e aktar\u0131rs\u0131n\u0131z. Bu,
package.json<\/code> veya node_modules<\/code> klas\u00f6r\u00fc karma\u015fas\u0131n\u0131 ortadan kald\u0131r\u0131r. Deno, mod\u00fclleri ilk kez indirdi\u011finde \u00f6nbelle\u011fe al\u0131r ve sonraki kullan\u0131mlarda internet ba\u011flant\u0131s\u0131 gerektirmez.<\/li>\n- Tek Y\u00fcr\u00fct\u00fclebilir Dosya:<\/strong> Deno, Node.js'in aksine, kendi i\u00e7inde bir test runner, formatter, linter ve bundler gibi bir\u00e7ok arac\u0131 bar\u0131nd\u0131ran tek bir y\u00fcr\u00fct\u00fclebilir ikili dosyad\u0131r. Bu, ek ara\u00e7lar\u0131n kurulum ve yap\u0131land\u0131rma derdini ortadan kald\u0131r\u0131r.<\/li>\n
- Modern Web Standartlar\u0131:<\/strong> Deno, Web API'lerini (Fetch API, Web Cryptography API gibi) do\u011frudan destekler ve Node.js'in kendine \u00f6zg\u00fc baz\u0131 API'lerini kullanmak yerine taray\u0131c\u0131 uyumlu API'lere \u00f6ncelik verir. Bu, taray\u0131c\u0131 ve sunucu kodlar\u0131 aras\u0131nda daha fazla ta\u015f\u0131nabilirlik sa\u011flar.<\/li>\n<\/ul>\n
Deno'da bir mod\u00fcl kullanmak i\u00e7in sadece URL'sini belirtmeniz yeterlidir:<\/p>\n
\n\/\/ Deno'da bir mod\u00fcl i\u00e7e aktarma\nimport { serve } from \"https:\/\/deno.land\/std@0.204.0\/http\/server.ts\";\n\nconst handler = (request: Request): Response => {\n return new Response(\"Merhaba Deno!\");\n};\n\nserve(handler, { port: 8000 });\n<\/pre>\n<\/code><\/p>\n
Bu kodu \u00e7al\u0131\u015ft\u0131rmak i\u00e7in izinleri belirtmeniz gerekir:<\/p>\n
\ndeno run --allow-net --allow-read main.ts\n<\/pre>\n<\/code><\/p>\n
Yukar\u0131daki komutta --allow-net<\/code> a\u011f eri\u015fimine izin verirken, --allow-read<\/code> dosya okuma eri\u015fimine izin verir. Bu gran\u00fcler izin sistemi, Deno'nun g\u00fcvenlik felsefesinin temelini olu\u015fturur.<\/p>\nVaka Analizi: Sunucu Taraf\u0131 Bir API'da Deno ile Geli\u015ftirme<\/h3>\n
K\u00fc\u00e7\u00fck bir mikroservis veya API geli\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcnelim. Node.js'te Express.js veya Koa gibi bir framework kullan\u0131r, npm ile ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurar ve TypeScript kullanmak i\u00e7in Babel veya ts-node gibi ek ara\u00e7lar ayarlard\u0131k. Deno ile bu s\u00fcre\u00e7 \u00e7ok daha yal\u0131n olabilir.<\/p>\n
\n\/\/ server.ts\nimport { Application, Router } from \"https:\/\/deno.land\/x\/oak@v12.0.0\/mod.ts\";\n\nconst app = new Application();\nconst router = new Router();\n\nrouter.get(\"\/\", (context) => {\n context.response.body = \"Merhaba Deno API!\";\n});\n\nrouter.get(\"\/users\/:id\", (context) => {\n if (context.params.id === \"1\") {\n context.response.body = { id: 1, name: \"Alice\" };\n } else {\n context.response.status = 404;\n context.response.body = { message: \"Kullan\u0131c\u0131 bulunamad\u0131.\" };\n }\n});\n\napp.use(router.routes());\napp.use(router.allowedMethods());\n\napp.listen({ port: 8000 });\nconsole.log(\"Deno API \u00e7al\u0131\u015f\u0131yor: http:\/\/localhost:8000\");\n<\/pre>\n<\/code><\/p>\n
Bu basit Oak framework tabanl\u0131 API'yi \u00e7al\u0131\u015ft\u0131rmak i\u00e7in:<\/p>\n
\ndeno run --allow-net --allow-read server.ts\n<\/pre>\n<\/code><\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, hi\u00e7bir npm install<\/code> veya yarn add<\/code> komutu \u00e7al\u0131\u015ft\u0131rmad\u0131k. oak<\/code> paketi do\u011frudan URL \u00fczerinden i\u00e7e aktar\u0131ld\u0131 ve Deno taraf\u0131ndan otomatik olarak \u00f6nbelle\u011fe al\u0131nd\u0131. TypeScript deste\u011fi yerle\u015fik oldu\u011fu i\u00e7in server.ts<\/code> dosyas\u0131n\u0131 do\u011frudan \u00e7al\u0131\u015ft\u0131rabildik. \u0130zin sistemi sayesinde, API'mizin sadece a\u011f ve dosya okuma yetkilerine sahip oldu\u011fundan emin olduk. Deno, \u00f6zellikle yeni ve g\u00fcvenli\u011fe duyarl\u0131 projeler i\u00e7in, veya Node.js'in getirdi\u011fi \"pakete ba\u011f\u0131ml\u0131l\u0131k\" karma\u015fas\u0131ndan kurtulmak isteyenler i\u00e7in \u00e7ekici bir alternatif sunmaktad\u0131r. Kendi paket y\u00f6neticisi olmasa da, mod\u00fcl sistemini farkl\u0131 bir felsefeyle ele alarak benzersiz bir yol \u00e7izmektedir.<\/p>\nVite Bu Paket Y\u00f6neticilerini Neden Seviyor ve Nas\u0131l Entegre Olur?<\/h2>\n
Front-end geli\u015ftirme d\u00fcnyas\u0131nda son y\u0131llar\u0131n en b\u00fcy\u00fck yeniliklerinden biri olan Vite, geli\u015ftirici deneyimini (DX) radikal bir \u015fekilde iyile\u015ftirmeyi hedefleyen yeni nesil bir build arac\u0131d\u0131r. \u00d6zellikle Node.js tabanl\u0131 ara\u00e7lar\u0131n (\u00f6rne\u011fin Webpack, Parcel) b\u00fcy\u00fck projelerde ya\u015fad\u0131\u011f\u0131 yava\u015f ba\u015flang\u0131\u00e7 ve s\u0131cak mod\u00fcl de\u011fi\u015fimi (HMR) s\u00fcrelerine \u00e7\u00f6z\u00fcm bulmak amac\u0131yla ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Peki, Vite neden npm, Yarn, Bun gibi paket y\u00f6neticilerini bu kadar seviyor ve onlarla nas\u0131l sorunsuz bir \u015fekilde entegre oluyor?<\/p>\n
Vite'\u0131n temel felsefesi, modern taray\u0131c\u0131lar\u0131n yerel ES Mod\u00fclleri (ESM) deste\u011fini kullanarak geli\u015ftirme sunucusu s\u0131ras\u0131nda derleme ad\u0131m\u0131n\u0131 (bundling) ortadan kald\u0131rmakt\u0131r. Geleneksel bundler'lar (Webpack gibi), geli\u015ftirme sunucusunu ba\u015flatmadan \u00f6nce t\u00fcm projenizi ba\u015ftan sona derler ve bir araya getirir. Bu, b\u00fcy\u00fck projelerde binlerce mod\u00fcl anlam\u0131na gelebilir ve sunucunun ba\u015flamas\u0131 i\u00e7in uzun bekleme s\u00fcrelerine yol a\u00e7ar. Vite ise bu yakla\u015f\u0131m\u0131 de\u011fi\u015ftirir:<\/p>\n
\n- Geli\u015ftirme Sunucusunda ESM'den Yararlanma:<\/strong> Vite, projenizin kodunu taray\u0131c\u0131ya do\u011frudan ES Mod\u00fclleri olarak sunar. Taray\u0131c\u0131, sadece ihtiya\u00e7 duydu\u011fu mod\u00fclleri talep eder ve Vite bunlar\u0131 an\u0131nda sunar. Bu, \u00e7ok h\u0131zl\u0131 bir ba\u015flang\u0131\u00e7 s\u00fcresi sa\u011flar.<\/li>\n
- Ba\u011f\u0131ml\u0131l\u0131k \u00d6n-Derlemesi:<\/strong> Projenizin
node_modules<\/code> klas\u00f6r\u00fcndeki ba\u011f\u0131ml\u0131l\u0131klar (\u00f6rne\u011fin React, Vue, Lodash gibi), genellikle binlerce mod\u00fcl i\u00e7eren d\u00fcz JavaScript dosyalar\u0131 de\u011fildir. Vite, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 ES Mod\u00fclleri format\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in esbuild gibi \u00e7ok h\u0131zl\u0131 bir derleyici kullan\u0131r. Bu \"\u00f6n-derleme\" i\u015flemi, yaln\u0131zca bir kez yap\u0131l\u0131r ve daha sonra \u00f6nbelle\u011fe al\u0131n\u0131r, b\u00f6ylece taray\u0131c\u0131 bunlar\u0131 tek bir istekte y\u00fckleyebilir. Bu, ba\u011f\u0131ml\u0131l\u0131klar\u0131 optimize eder ve a\u011f isteklerini azalt\u0131r.<\/li>\n- Rollup Tabanl\u0131 \u00dcretim Derlemesi:<\/strong> \u00dcretim ortam\u0131 i\u00e7in ise Vite, optimize edilmi\u015f ve k\u00fc\u00e7\u00fck boyutlu \u00e7\u0131kt\u0131lar \u00fcretmek amac\u0131yla Rollup'\u0131 kullan\u0131r. Rollup, a\u011fa\u00e7 sallama (tree-shaking) ve kod b\u00f6lme (code-splitting) gibi geli\u015fmi\u015f optimizasyon teknikleriyle bilinir.<\/li>\n<\/ol>\n
Vite'\u0131n bu mimarisi, paket y\u00f6neticileriyle m\u00fckemmel bir uyum i\u00e7indedir. \u00c7\u00fcnk\u00fc Vite, projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 y\u00f6netme ve kurma i\u015fini tamamen paket y\u00f6neticilerine b\u0131rak\u0131r.<\/strong> Vite'\u0131n kendisi bir paket y\u00f6neticisi de\u011fildir; o bir build arac\u0131d\u0131r. Sizin npm install<\/code> veya yarn add<\/code> ile kurdu\u011funuz paketleri tan\u0131r, onlar\u0131 node_modules<\/code> klas\u00f6r\u00fcnde bulur ve kendi \u00f6n-derleme ve sunum s\u00fcre\u00e7lerinde kullan\u0131r.<\/p>\n\u00d6rne\u011fin, bir Vite projesi olu\u015fturdu\u011funuzda, package.json<\/code> dosyan\u0131zda Vite'\u0131n kendisi ve kulland\u0131\u011f\u0131n\u0131z framework'e (React, Vue) ait ba\u011f\u0131ml\u0131l\u0131klar yer al\u0131r:<\/p>\n\n\/\/ package.json (Vite projesi i\u00e7in)\n{\n \"name\": \"my-vite-app\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n },\n \"devDependencies\": {\n \"@types\/react\": \"^18.2.37\",\n \"@types\/react-dom\": \"^18.2.15\",\n \"@vitejs\/plugin-react\": \"^4.2.0\",\n \"typescript\": \"^5.2.2\",\n \"vite\": \"^5.0.0\"\n }\n}\n<\/pre>\n<\/code><\/p>\n
Bu projeyi \u00e7al\u0131\u015ft\u0131rabilmek i\u00e7in \u00f6ncelikle bir paket y\u00f6neticisi kullanarak ba\u011f\u0131ml\u0131l\u0131klar\u0131 kurman\u0131z gerekir:<\/p>\n
\n# npm kullan\u0131yorsan\u0131z\nnpm install\n\n# yarn kullan\u0131yorsan\u0131z\nyarn install\n\n# bun kullan\u0131yorsan\u0131z\nbun install\n<\/pre>\n<\/code><\/p>\n
Hangi paket y\u00f6neticisini kulland\u0131\u011f\u0131n\u0131z \u00f6nemli de\u011fildir. Vite, node_modules<\/code> klas\u00f6r\u00fcn\u00fc ve package-lock.json<\/code>, yarn.lock<\/code> veya bun.lockb<\/code> dosyalar\u0131n\u0131 tan\u0131yacak ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131z\u0131 do\u011fru bir \u015fekilde \u00e7\u00f6z\u00fcmleyecektir. Vite'\u0131n bu esnekli\u011fi, geli\u015ftiricilere tercih ettikleri paket y\u00f6neticisini kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. Bun gibi yeni nesil paket y\u00f6neticilerinin sundu\u011fu h\u0131z avantajlar\u0131, Vite'\u0131n zaten h\u0131zl\u0131 olan geli\u015ftirme deneyimini daha da ileriye ta\u015f\u0131r.<\/p>\n\n Uzman \u0130pucu: Vite projelerinizde farkl\u0131 paket y\u00f6neticilerini denemek, \u00f6zellikle b\u00fcy\u00fck ba\u011f\u0131ml\u0131l\u0131k a\u011fa\u00e7lar\u0131 olan projelerde npm install<\/code> yerine bun install<\/code> ile kurulum s\u00fcresinde %70'e varan iyile\u015fmeler sa\u011flayabilir. Bu, CI\/CD s\u00fcre\u00e7lerinizde de \u00f6nemli zaman tasarrufu anlam\u0131na gelir.\n <\/div>\n\u00d6zetle, Vite ve paket y\u00f6neticileri birbirini tamamlayan iki ara\u00e7t\u0131r. Paket y\u00f6neticileri projenizin ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 d\u00fczenli ve eri\u015filebilir tutarken, Vite bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 kullanarak size y\u0131ld\u0131r\u0131m h\u0131z\u0131nda bir geli\u015ftirme ve \u00fcretim ortam\u0131 sunar. Bu i\u015fbirli\u011fi, modern web geli\u015ftiricileri i\u00e7in verimli ve keyifli bir deneyimin anahtar\u0131d\u0131r.<\/p>\n
Geli\u015ftirici Deneyimini \u0130yile\u015ftirmek \u0130\u00e7in \u0130pu\u00e7lar\u0131 ve P\u00fcf Noktalar\u0131<\/h2>\n
Paket y\u00f6neticileriyle \u00e7al\u0131\u015fmak, modern JavaScript geli\u015ftiricilerinin g\u00fcnl\u00fck rutinlerinin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. Ancak bu ara\u00e7lar\u0131 sadece temel komutlarla kullanmak yerine, baz\u0131 ipu\u00e7lar\u0131 ve p\u00fcf noktalar\u0131yla geli\u015ftirme deneyiminizi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz. \u0130\u015fte daha verimli, tutarl\u0131 ve sorunsuz bir i\u015f ak\u0131\u015f\u0131 i\u00e7in uygulayabilece\u011finiz baz\u0131 stratejiler:<\/p>\n
Node.js S\u00fcr\u00fcmlerini Verimli Y\u00f6netin<\/h3>\n
Farkl\u0131 projeler genellikle farkl\u0131 Node.js s\u00fcr\u00fcmleri gerektirebilir. Bir projede Node.js 16 kullan\u0131rken, di\u011ferinde Node.js 18 veya 20'ye ihtiyac\u0131n\u0131z olabilir. Bu durumda, Node.js s\u00fcr\u00fcm y\u00f6neticileri (NVM - Node Version Manager veya FNM - Fast Node Manager gibi) hayat kurtar\u0131c\u0131d\u0131r. Bu ara\u00e7lar, tek bir komutla farkl\u0131 Node.js s\u00fcr\u00fcmleri aras\u0131nda ge\u00e7i\u015f yapman\u0131z\u0131 sa\u011flar ve proje baz\u0131nda do\u011fru s\u00fcr\u00fcm\u00fcn kullan\u0131lmas\u0131n\u0131 garantiler.<\/p>\n
\n# NVM ile Node.js 18.x s\u00fcr\u00fcm\u00fcn\u00fc kurma ve kullanma\nnvm install 18\nnvm use 18\n\n# Proje dizininde .nvmrc dosyas\u0131 olu\u015fturarak s\u00fcr\u00fcm\u00fc sabitleme\necho \"18.x\" > .nvmrc\n# Ard\u0131ndan projeye girince otomatik olarak\nnvm use\n<\/pre>\n<\/code><\/p>\n
Bu sayede, package-lock.json<\/code> veya yarn.lock<\/code> dosyalar\u0131yla sa\u011flanan ba\u011f\u0131ml\u0131l\u0131k tutarl\u0131l\u0131\u011f\u0131na ek olarak, \u00e7al\u0131\u015fma zaman\u0131 ortam\u0131n\u0131n da tutarl\u0131 kalmas\u0131n\u0131 sa\u011flars\u0131n\u0131z.<\/p>\nBa\u011f\u0131ml\u0131l\u0131klar\u0131 G\u00fcncel Tutun ve G\u00fcvenlik A\u00e7\u0131klar\u0131n\u0131 \u0130zleyin<\/h3>\n
Paket ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 d\u00fczenli olarak g\u00fcncellemek hem yeni \u00f6zelliklere eri\u015fim hem de kritik g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 kapatmak i\u00e7in \u00f6nemlidir. Ancak bu s\u00fcre\u00e7 bazen karma\u015f\u0131k olabilir. npm outdated<\/code> veya yarn outdated<\/code> komutlar\u0131, hangi paketlerin g\u00fcncel olmad\u0131\u011f\u0131n\u0131 g\u00f6sterir. Daha proaktif bir yakla\u015f\u0131m i\u00e7in npm-check-updates<\/code> (NCU) gibi ara\u00e7lar\u0131 kullanabilirsiniz. NCU, package.json<\/code> dosyan\u0131z\u0131 tarar ve ba\u011f\u0131ml\u0131l\u0131klar\u0131n yeni s\u00fcr\u00fcmlerini \u00f6nerir, hatta bunlar\u0131 otomatik olarak g\u00fcncelleyebilir (dikkatli kullan\u0131lmal\u0131d\u0131r).<\/p>\n\n# npm-check-updates kurun\nnpm install -g npm-check-updates\n\n# G\u00fcncel olmayan ba\u011f\u0131ml\u0131l\u0131klar\u0131 kontrol edin\nncu\n\n# package.json dosyas\u0131n\u0131 g\u00fcncelleme \u00f6nerilerine g\u00f6re y\u00fckseltin (dikkatli kullan\u0131n!)\nncu -u\n<\/pre>\n<\/code><\/p>\n
G\u00fcvenlik i\u00e7in npm audit<\/code> veya yarn audit<\/code> komutlar\u0131n\u0131 d\u00fczenli olarak \u00e7al\u0131\u015ft\u0131rmak, bilinen g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 tespit etmenize ve gidermenize yard\u0131mc\u0131 olur.<\/p>\nMonorepo'larda Workspaces Kullan\u0131m\u0131n\u0131 \u00d6\u011frenin<\/h3>\n
E\u011fer birden fazla ili\u015fkili projeyi (\u00f6rne\u011fin bir ana uygulama, bir bile\u015fen k\u00fct\u00fcphanesi ve bir API) tek bir depoda y\u00f6netiyorsan\u0131z (monorepo), Yarn, npm ve Bun'\u0131n sundu\u011fu workspaces \u00f6zelli\u011fi geli\u015ftirme deneyiminizi inan\u0131lmaz derecede iyile\u015ftirecektir. Workspaces, ba\u011f\u0131ml\u0131l\u0131klar\u0131 merkezi olarak y\u00f6netir, yerel paketler aras\u0131 referanslar\u0131 kolayla\u015ft\u0131r\u0131r ve kurulum s\u00fcrelerini optimize eder. Bu sayede, her alt proje i\u00e7in ayr\u0131 ayr\u0131 ba\u011f\u0131ml\u0131l\u0131k y\u00f6netimi yapmak zorunda kalmazs\u0131n\u0131z.<\/p>\n
\n\/\/ root\/package.json'da workspaces tan\u0131mlamas\u0131\n{\n \"private\": true,\n \"workspaces\": [\n \"packages\/*\",\n \"apps\/*\"\n ]\n}\n<\/pre>\n<\/code><\/p>\n
<\/pre>\n<\/code>
\n# K\u00f6k dizinden t\u00fcm ba\u011f\u0131ml\u0131l\u0131klar\u0131 kur
\nnpm install # veya yarn install, bun install<\/p>\n
# Bir alt projedeki script'i \u00e7al\u0131\u015ft\u0131r (npm \u00f6rne\u011fi)
\nnpm run --workspace=my-app dev
\n<\/code><\/p>\n
Geli\u015ftirme Ak\u0131\u015f\u0131n\u0131 Otomatikle\u015ftiren Git Hook'lar\u0131n\u0131 Kullan\u0131n<\/h3>\n
Paket y\u00f6neticileri sadece ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmekle kalmaz, ayn\u0131 zamanda package.json<\/code>'daki scripts<\/code> b\u00f6l\u00fcm\u00fc arac\u0131l\u0131\u011f\u0131yla otomatik g\u00f6revleri de \u00e7al\u0131\u015ft\u0131rabilir. husky<\/code> veya lint-staged<\/code> gibi k\u00fct\u00fcphanelerle Git hook'lar\u0131n\u0131 kullanarak, kodunuzu commit etmeden \u00f6nce linting, formatlama veya test \u00e7al\u0131\u015ft\u0131rma gibi i\u015flemleri otomatikle\u015ftirebilirsiniz. Bu, kod taban\u0131n\u0131z\u0131n kalitesini ve tutarl\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/p>\n\n\/\/ package.json (husky ve lint-staged \u00f6rnekleri)\n{\n \"scripts\": {\n \"lint\": \"eslint .\",\n \"format\": \"prettier --write .\"\n },\n \"devDependencies\": {\n \"husky\": \"^8.0.0\",\n \"lint-staged\": \"^15.0.0\",\n \"eslint\": \"^8.0.0\",\n \"prettier\": \"^3.0.0\"\n },\n \"lint-staged\": {\n \"*.{js,jsx,ts,tsx}\": [\n \"eslint --fix\",\n \"prettier --write\"\n ],\n \"*.{json,css,md}\": [\n \"prettier --write\"\n ]\n }\n}\n<\/pre>\n<\/code><\/p>\n
<\/pre>\n<\/code>
\n# Husky kurulumu ve bir pre-commit hook ekleme
\nnpx husky install
\nnpx husky add .husky\/pre-commit \"npx lint-staged\"
\n<\/code><\/p>\n
Bu sayede her commit \u00f6ncesi sadece sahnelenmi\u015f (staged) dosyalar \u00fczerinde otomatik olarak lint ve format i\u015flemleri \u00e7al\u0131\u015f\u0131r, bu da kod kalitesini art\u0131r\u0131r ve tak\u0131m i\u00e7inde tutarl\u0131l\u0131k sa\u011flar.<\/p>\n
Mobil Uyumlu Tasar\u0131m \u0130\u00e7in CSS Media Query \u00d6rne\u011fi<\/h3>\n
Web geli\u015ftirmede paket y\u00f6neticileri ve build ara\u00e7lar\u0131 kadar, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen mobil uyumluluk da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Modern bir web uygulamas\u0131, farkl\u0131 ekran boyutlar\u0131na sorunsuz bir \u015fekilde adapte olmal\u0131d\u0131r. \u0130\u015fte temel bir CSS media query \u00f6rne\u011fi, bu uyumlulu\u011fu nas\u0131l sa\u011flayabilece\u011finizi g\u00f6sterir:<\/p>\n
\n\/* Genel stil kurallar\u0131 *\/\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.container {\n max-width: 960px;\n margin: 0 auto;\n padding: 20px;\n background-color: #fff;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\nh2 {\n color: #333;\n}\n\n\/* K\u00fc\u00e7\u00fck ekranlar i\u00e7in (\u00f6rne\u011fin mobil cihazlar) *\/\n@media (max-width: 768px) {\n body {\n padding: 10px;\n }\n\n .container {\n padding: 15px;\n margin: 10px;\n }\n\n h2 {\n font-size: 1.5em;\n }\n\n \/* Belirli elemanlar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirme *\/\n .grid-layout {\n display: flex;\n flex-direction: column;\n }\n\n .grid-item {\n width: 100%;\n margin-bottom: 10px;\n }\n}\n\n\/* Daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in (\u00f6rne\u011fin dar telefon ekranlar\u0131) *\/\n@media (max-width: 480px) {\n h2 {\n font-size: 1.2em;\n }\n\n .container {\n box-shadow: none; \/* K\u00fc\u00e7\u00fck ekranlarda g\u00f6lgeyi kald\u0131r *\/\n }\n}\n<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte, taray\u0131c\u0131 penceresinin geni\u015fli\u011fine g\u00f6re farkl\u0131 stiller uyguluyoruz. @media (max-width: 768px)<\/code> kural\u0131, ekran geni\u015fli\u011fi 768 pikselin alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde ge\u00e7erli olacak stilleri tan\u0131mlar; bu genellikle tabletler ve mobil cihazlar i\u00e7indir. Daha da k\u00fc\u00e7\u00fck ekranlar i\u00e7in (max-width: 480px<\/code>) ek ayarlamalar yap\u0131labilir. Bu yakla\u015f\u0131m, kullan\u0131c\u0131lar\u0131n cihazlar\u0131ndan ba\u011f\u0131ms\u0131z olarak tutarl\u0131 ve iyi bir deneyim ya\u015famas\u0131n\u0131 sa\u011flar. Paket y\u00f6neticileri ve build ara\u00e7lar\u0131, bu CSS dosyalar\u0131n\u0131n projeye dahil edilmesi ve optimize edilmesi s\u00fcrecini y\u00f6netir, b\u00f6ylece mobil uyumlu tasar\u0131mlar da performansl\u0131 bir \u015fekilde sunulabilir.<\/p>\nGelece\u011fe Bak\u0131\u015f: Hangi Paket Y\u00f6neticisini Se\u00e7melisiniz?<\/h2>\n
npm, Yarn, Bun ve Deno \u2014 her biri JavaScript ekosistemine farkl\u0131 avantajlar ve yakla\u015f\u0131mlar sunan g\u00fc\u00e7l\u00fc ara\u00e7lard\u0131r. Hangi paket y\u00f6neticisini se\u00e7ece\u011finiz, projenizin ihtiya\u00e7lar\u0131na, geli\u015ftirme ekibinizin tercihlerine ve performans beklentilerinize g\u00f6re de\u011fi\u015fiklik g\u00f6sterebilir. \u0130\u015fte genel bir \u00f6zet ve karar vermenize yard\u0131mc\u0131 olacak baz\u0131 senaryolar:<\/p>\n
\u00d6zet Kar\u015f\u0131la\u015ft\u0131rma Tablosu<\/h3>\n
\n\n\n\u00d6zellik<\/th>\n npm<\/th>\n Yarn<\/th>\n Bun<\/th>\n Deno<\/th>\n<\/tr>\n<\/thead>\n \n\n\u00c7\u0131k\u0131\u015f Y\u0131l\u0131<\/strong><\/td>\n2010<\/td>\n 2016<\/td>\n 2022<\/td>\n 2018<\/td>\n<\/tr>\n \nH\u0131z<\/strong><\/td>\nOrta<\/td>\n H\u0131zl\u0131<\/td>\n \u00c7ok H\u0131zl\u0131<\/td>\n N\/A (Paket Y\u00f6neticisi De\u011fil)<\/td>\n<\/tr>\n \n