Yarn Çalışma Alanları: Projenizin Kod Tabanını Bir Profesyonel Gibi Düzenleyin

Ne zaman yeni bir proje üzerinde çalışmaya başlasam kendime şunu sorarım: "Arka uç sunucum ve ön uç istemci(ler)im için ayrı git depoları kullanmalı mıyım? Kod tabanını düzenlemenin en iyi yolu nedir?”

Kişisel web sitemde birkaç ay çalıştıktan sonra aynı soruyu yaşadım. Başlangıçta tüm kodlar aynı depodaydı: arka uç Node.js'yi ve ön uç ES6'yı Pug ile kullandı. Bu organizasyonu kolaylık sağlamak için benimsedim, çünkü her iki projenin de aynı repoda olması, fonksiyonları ve sınıfları aramayı kolaylaştırdı ve refactor'ları kolaylaştırdı. Ancak, bazı olumsuzluklar buldum:

• Bağımsız dağıtım yok.
  Her iki uygulama da aynı package.json dosyasını kullanıyordu ve her iki projede de net bir ayrım yoktu.
• Belirsiz sınırlar.
  Global package.json öğesine güvendiğim için, arka uç ve ön uç için belirli sürümler ayarlayacak bir mekanizmam yoktu.
• Sürüm oluşturmadan paylaşılan yardımcı programlar ve kod.

Biraz araştırmadan sonra, Yarn çalışma alanlarının bu eksileri çözmek için harika bir araç olduğunu ve bir monorepo projesi oluşturmak için yararlı bir araç olduğunu buldum (daha fazlası daha sonra gelecek!).

Bu yazıda Yarn çalışma alanlarına bir giriş paylaşıyorum. Onunla ilk projenizi nasıl oluşturacağınıza dair bir öğreticiyi birlikte gözden geçireceğiz ve bir özet ve sonraki adımlarla bitireceğiz.

İplik Çalışma Alanları Nelerdir?

Yarn, Facebook'taki insanlar tarafından bir paket yöneticisidir ve Yarn çalışma alanları adı verilen harika bir özelliğe sahiptir. Yarn çalışma alanları, monolitik bir depo (monorepo) kullanarak proje kod tabanınızı düzenlemenize izin verir. Buradaki fikir, tek bir havuzun birden fazla paket içermesidir. Paketler yalıtılmıştır ve daha büyük projeden bağımsız olarak yaşayabilir.

Alternatif olarak, tüm bu paketleri ayrı depolara yerleştirebiliriz. Ne yazık ki bu yaklaşım, paketler ve bunlara bağlı projeler üzerinde geliştirme yaparken paylaşılabilirliği, verimliliği ve geliştirici deneyimini etkiler. Ayrıca, tek bir havuzda çalıştığımızda, tüm geliştirme yaşam döngüsü için süreçleri iyileştirmek için daha hızlı hareket edebilir ve daha spesifik araçlar oluşturabiliriz.

Monorepo projeleri, Google veya Facebook gibi büyük şirketler tarafından geniş çapta kabul gördü ve monorepo'nun ölçeklenebileceğini kanıtladılar.

“

React, monorepo olan açık kaynaklı bir projenin güzel bir örneğidir. Ayrıca React, bu amaca ulaşmak için Yarn çalışma alanlarını kullanır. Bir sonraki bölümde Yarn ile ilk monorepo projemizi nasıl oluşturacağımızı öğreneceğiz.

Altı Adımda İplik Çalışma Alanlarını Kullanarak React And Express ile Monorepo Projesi Oluşturma

Şimdiye kadar Yarn'ın ne olduğunu, monorepo'nun ne olduğunu ve Yarn'ın neden monorepo oluşturmak için harika bir araç olduğunu öğrendik. Şimdi Yarn çalışma alanlarını kullanarak yeni bir projenin nasıl kurulacağını sıfırdan öğrenelim. Devam etmek için güncel bir npm kurulumuna sahip bir çalışma ortamına ihtiyacınız olacak. Kaynak kodunu indirin.

Önkoşullar

Bu öğreticiyi tamamen tamamlamak için, makinenizde Yarn'ın kurulu olması gerekir. Yarn'ı daha önce yüklemediyseniz, lütfen bu talimatları izleyin.

Bu eğitimde izleyeceğimiz adımlar şunlardır:

1. Projenizi ve Kök Çalışma Alanınızı Oluşturun
2. Bir React Projesi Oluşturun ve Çalışma Alanı Listesine Ekleyin
3. Bir Ekspres Proje Oluşturun ve Çalışma Alanına Ekleyin
4. Tüm Bağımlılıkları Yükleyin ve thread.lock'a Merhaba Deyin
5. Tüm Paketlerinizi İçe Aktarmak İçin Bir Joker Karakter (*) Kullanma
6. Her İki Paketi Çalıştırmak İçin Bir Komut Dosyası Ekleyin

1. Projenizi ve Kök Çalışma Alanınızı Oluşturun

Yerel makine terminalinizde, example-monorepo adlı yeni bir klasör oluşturun:

 $ mkdir example-monorepo

Klasörün içinde, kök çalışma alanımızla yeni bir package.json oluşturun.

 $ cd example-monorepo $ touch package.json

Kök çalışma alanının yanlışlıkla yayınlanmasını önlemek için bu paket özel olmalıdır. Paketi özel yapmak için yeni package.json dosyanıza aşağıdaki kodu ekleyin:

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. Bir React Projesi Oluşturun ve Çalışma Alanı Listesine Ekleyin

Bu adımda yeni bir React projesi oluşturacağız ve onu root workspace içindeki paketler listesine ekleyeceğiz.

Öncelikle öğreticide oluşturacağımız farklı projeleri ekleyeceğimiz paketler adında bir klasör oluşturalım:

 $ mkdir packages

Facebook'un yeni React projeleri oluşturma komutu vardır: create-react-app . Gerekli tüm yapılandırma ve komut dosyalarıyla yeni bir React uygulaması oluşturmak için kullanacağız. 1. adımda oluşturduğumuz paketler klasörünün içinde “client” ismiyle bu yeni projeyi oluşturuyoruz.

 $ yarn create react-app packages/client

Yeni React projemizi oluşturduğumuzda, Yarn'a bu projeyi bir çalışma alanı olarak ele almasını söylemeliyiz. Bunu yapmak için, root package.json içindeki "workspaces" listesine "client" (daha önce kullandığımız ad) eklememiz yeterlidir. create-react-app komutunu çalıştırırken kullandığınız adı kullandığınızdan emin olun.

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. Bir Ekspres Proje Oluşturun ve Çalışma Alanına Ekleyin

Şimdi bir arka uç uygulaması ekleme zamanı! Gerekli tüm konfigürasyon ve komut dosyaları ile bir Express iskeleti oluşturmak için express-generator kullanıyoruz.

Bilgisayarınızda express-generator kurulu olduğundan emin olun. Aşağıdaki komutla Yarn kullanarak kurabilirsiniz:

 $ yarn global add express-generator --prefix /usr/local

express-generator kullanarak, paketler klasörünün içinde "sunucu" adında yeni bir Express uygulaması oluşturuyoruz.

 $ express --view=pug packages/server

Son olarak, "server" adlı yeni paketi root package.json içindeki çalışma alanları listesine ekleyin.

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

Not : Bu öğretici yalnızca iki paketle (sunucu ve istemci) basitleştirilmiştir. Bir projede, genellikle ihtiyaç duyduğunuz kadar paketiniz olabilir ve genel olarak açık kaynak topluluğu şu adlandırma modelini kullanır: @your-project-name/package-name . Örneğin: Web sitemde @ferreiro/server kullanıyorum .

4. Tüm Bağımlılıkları Kurun ve thread.lock'a Merhaba Deyin

React uygulamamızı ve Express sunucumuzu ekledikten sonra tüm bağımlılıkları yüklememiz gerekiyor. Yarn çalışma alanları bu süreci basitleştirir ve artık her uygulamaya gidip bağımlılıklarını manuel olarak kurmamıza gerek kalmaz. Bunun yerine, tek bir komutu yürütüyoruz - yarn install - ve Yarn, her paket için tüm bağımlılıkları kurmak ve bunları optimize etmek ve önbelleğe almak için sihri yapıyor.

Aşağıdaki komutu çalıştırın:

 $ yarn install

Bu komut, bir thread.lock dosyası oluşturur (bu örneğe benzer). Projeniz için tüm bağımlılıkları ve her bir bağımlılığın sürüm numaralarını içerir. Yarn bu dosyayı otomatik olarak oluşturur ve onu değiştirmemelisiniz.

5. Tüm Paketlerinizi İçe Aktarmak İçin Bir Joker Karakter (*) Kullanma

Şimdiye kadar, eklediğimiz her yeni paket için, yeni paketi workspaces:[] listesine dahil etmek için root package.json'u da güncellemek zorunda kaldık.

Yarn'a tüm paketleri paketler klasörüne dahil etmesini söyleyen bir joker karakter (*) kullanarak bu manuel adımdan kaçınabiliriz.

root package.json içinde, dosya içeriğini şu satırla güncelleyin: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. Her İki Paketi Çalıştırmak İçin Bir Komut Dosyası Ekleyin

Son adım! Her iki paketi (React istemcisi ve Express istemcisi) aynı anda çalıştırmanın bir yolunu bulmamız gerekiyor. Bu örnek için, concurrently olarak kullanacağız. Bu paket, paralel olarak birden çok komutu çalıştırmamıza izin verir.

root package.json dosyasına concurrently ekleyin:

 $ yarn add -W concurrently

root workspace package.json içine üç yeni komut dosyası ekleyin. İki komut dosyası, React ve Express istemcilerini bağımsız olarak başlatır; diğeri, her iki komut dosyasını da paralel olarak çalıştırmak için concurrently kullanır. Referans için bu koda bakın.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

Not : start ​​betiklerimizi “sunucu” ve “istemci” paketlerine yazmamız gerekmeyecek çünkü bu paketleri oluşturmak için kullandığımız araçlar ( create-react-app ve express-generator ) bu scriptleri zaten bizim için ekliyor. Bu yüzden gitmeye hazırız!

Son olarak, Express sunucusunu 4000 numaralı bağlantı noktasında çalıştırmak için Express önyükleme komut dosyasını güncellediğinizden emin olun. Aksi takdirde, istemci ve sunucu aynı bağlantı noktasını (3000) kullanmaya çalışacaktır.

Paketler/sunucu/bin/www'ye gidin ve 15. satırdaki varsayılan bağlantı noktasını değiştirin.

 var port = normalizePort(process.env.PORT || '4000');

Artık paketlerimizi çalıştırmaya hazırız!

 $ yarn start

Buradan Nereye Gidilir

Anlattıklarımızı tekrarlayalım. İlk olarak, Yarn çalışma alanlarını ve neden bir monorepo projesi oluşturmak için harika bir araç olduğunu öğrendik. Ardından Yarn kullanarak ilk JavaScript monorepo projemizi oluşturduk ve uygulamamızın mantığını birden çok pakete ayırdık: istemci ve sunucu. Ayrıca, ilk temel npm betiklerimizi oluşturduk ve her uygulama için gerekli bağımlılıkları ekledik.

Bu noktadan sonra, proje mantığını birçok pakete bölmek için Yarn çalışma alanlarını nasıl kullandıklarını görmek için açık kaynaklı projeleri ayrıntılı olarak incelemenizi öneririm. Tepki iyidir.

Ayrıca, arka uç ve ön uç uygulamalarını bağımsız paketlere ayırmak için bu yaklaşımı kullanan bir üretim web sitesi görmek istiyorsanız, bir blog yöneticisi de içeren web sitemin kaynağını kontrol edebilirsiniz. Yarn çalışma alanlarını kullanmak için kod tabanını geçirdiğimde, Kyle Wetch ile bir çekme isteği oluşturdum.

Ayrıca React, webpack, Node.js ve Yarn çalışma alanlarını kullanan bir hackathon projesinin altyapısını kurdum, kaynak kodunu buradan inceleyebilirsiniz.

Son olarak, geliştirme yaşam döngüsüne aşina olmak için bağımsız paketlerinizi nasıl yayınlayacağınızı öğrenmek gerçekten ilginç olacaktır. Kontrol edilmesi ilginç olan birkaç öğretici var: iplik yayınlama veya npm yayınlama.

Herhangi bir yorum veya soru için bana Twitter'dan ulaşmaktan çekinmeyin. Ayrıca, önümüzdeki aylarda blogumda bununla ilgili daha fazla içerik yayınlayacağım, böylece oraya da abone olabilirsiniz. Mutlu kodlama!