Monorepo Kavramı

Photo by CHUTTERSNAP on Unsplash

Monorepo, birden fazla projenin tek bir kod deposunda yönetildiği bir yazılım geliştirme stratejisidir. Bu stratejide, her proje kendi klasörüne veya paketine sahip olsa da, tüm kodlar tek bir depolama alanında bulunur. Monorepo, büyük ve karmaşık kod tabanlarını yönetmek için güçlü bir araç olabilir.

https://monorepo.tools/images/monorepo-polyrepo.svg

Monoreponun Avantajları:

• Tekrarı azaltır: Birden fazla projede kullanılan kodlar tek bir yerde tutulduğundan, kod tekrarı azalır. Bu da kod tabanının daha tutarlı ve bakımı kolay olmasını sağlar.
• Verimliliği artırır: Monorepo, geliştirme ekiplerinin kod tabanında değişiklik yapmasını ve yeni özellikler eklemesini kolaylaştırır. Tek bir depo kullanmak, kod incelemeleri ve birleştirmeler gibi işlemleri daha basit hale getirir.
• Geliştirmeyi hızlandırır: Monorepo, kod tabanındaki değişikliklerin tüm projelere anında yansımasını sağlar. Bu da geliştirme döngüsünü hızlandırır ve daha hızlı teslimatlara olanak tanır.

Monoreponun Dezavantajları:

• Karmaşıklık: Monorepo, büyük ve karmaşık kod tabanları için daha karmaşık bir yapı olabilir. Bu da kod tabanında gezinmeyi ve hata ayıklamayı zorlaştırabilir.
• Performans: Monorepo, büyük kod tabanları için daha fazla depolama alanı ve işlem gücü gerektirebilir.
• Eğitim: Monorepo, geliştirme ekiplerinin yeni bir çalışma şekli öğrenmesini gerektirebilir.

Monorepo Kullanmak İçin JavaScript Kütüphaneleri:

Monorepo ile geliştirmeyi kolaylaştırmak için birçok JavaScript kütüphanesi mevcuttur. En popüler kütüphanelerden bazıları şunlardır:

• Lerna: Monorepo ile geliştirmeyi kolaylaştıran bir JavaScript kütüphanesidir. Lerna, paket yönetimi, görev yürütme ve sürüm kontrolü gibi işlemleri otomatikleştirmeye yardımcı olur.
• Yarn: JavaScript paket yöneticisi. Monorepo ile geliştirmeyi kolaylaştıran birçok özelliğe sahiptir.
• Nx: Angular ve React gibi çeşitli teknolojilerle uygulama geliştirmek için kullanılan bir araçtır. Nx, monorepo yapılarını destekler ve birden fazla proje veya kütüphaneyi tek bir depoda yönetmenizi sağlar. Ayrıca, geliştirme sürecini kolaylaştırmak için çeşitli özellikler sunar.
• Rush: Microsoft tarafından geliştirilen bir monorepo yönetim aracıdır. Lerna’ya benzer birçok özelliğe sahiptir.

Monorepo, büyük ve karmaşık kod tabanlarını yönetmek için güçlü bir araç olabilir. Monorepo kullanmayı düşünüyorsanız, öncelikle bu stratejinin avantajlarını ve dezavantajlarını dikkatlice değerlendirmeniz önemlidir.

Lerna ve React JS kullanarak basit bir monorepo projesi yapalım.

1. İlk olarak, Lerna’yı kurun:

npm install -g lerna

2. Ardından, bir ana klasör oluşturun ve içine girin:

mkdir monorepo-example
cd monorepo-example

3. Lerna ile monorepo kurulumu komutu:

lerna init

İki tane paketimiz olsun, “common” ve “sample-app” adında. Senaryomuz, common paketi içindeki modal bileşenini sample-app uygulamasında kullanmak.

4. packages klasörü oluşturup içine de common ve sample-app adında klasör oluşturalım:

mkdir packages
cd packages
mkdir common
mkdir sample-app

5. Her bir paketin içine girip ve React uygulamaları oluşturalım:

cd packages/common
npx create-react-app .
cd ../sample-app
npx create-react-app .

6. sample-app ve common arasında bağımlılığı eklemek için sample-app paketinin bağımlılık olarak common paketini verelim:

package.json

...
 "dependencies": {
    "common": "file:../common/src/components/modal"
  },
...

Ardından yarn komutunu çalıştırarak paketi yükleyelim:

yarn

sample-app paketinde Modal bileşenini ekleyelim:

App.js

import Modal from "common/src/components/modal/Modal";

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Monorepo Example App</h1>
        <Modal/>
      </header>
    </div>
  );
}

export default App;

“You may need an additional loader to handle the result of these loaders.”

sample-app paketini ayağa kaldırdığımızda aşağıdaki gibi bir hata almamız muhtemel. O yüzden “craco” adında bir paketle webpack ayarı yapmamız gerekecek. Paketi kurduktan sonra ana dizinde craco.config.js dosyası oluşturup aşağıdaki kodları ekleyelim.

yarn add -D @craco/craco

const path = require("path");
const { getLoader, loaderByName } = require("@craco/craco");

const packages = [];
packages.push(path.join(__dirname, "../common"));
module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(webpackConfig, loaderByName("babel-loader"));
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }

      return webpackConfig;
    },
  },
};

Bu adımları takip ederek, Lerna ve React.js kullanarak basit bir monorepo oluşturmuş olduk. sample-app içindeki React uygulaması, common içindeki bileşeni kullanmaktadır. Bu yapı, monorepo yaklaşımının basit bir örneğidir ve projenizin ihtiyaçlarına göre özelleştirilebilir.

Örnek projenin kaynak kodlarına bu linkten ulaşabilirsiniz. 🔗

İçeriklere devam 🚀

Diğer içeriklerime bu linke tıklayıp ulaşabilirsiniz. Beğenip yorum bırakırsanız çok mutlu olurum 😇