Plop Js ile Kopyala/Yapıştırdan Kurtulun!

Merhabalar,

Hemen hepimiz bir projede çalışırken bir birine benzer yapıları oluştururken bir öncekinden kopyala/yapıştır yapıyoruzdur. Bunun hızlı bir yolu var mı diye düşünürken karşıma plop js çıktı.

Plop js aslında cli üzerinden daha önce şablonlarını oluşturduğumuz yapıları komut vasıtasıyla oluşturmamıza yarıyor. Bunu yaparken de gayet basit bir şekilde uyguluyor. Plop js ‘e alternatif olarak hygen ve yeoman’ ı verebilirim. İleride bu kütüphanelerle ilgili olarak da içerik yazmayı planlıyorum.

Bize Sağladığı Kolaylıklar Nelerdir?

• Zaman kazandırır.
• Tekrar eden kod bloklarını, klasör yapılarını her seferinde yazmaktan kurtarır.
• Projede çalışan kişilerin aynı standartta yapılar oluşturmasına yardımcı olur. Yani Kod bütünlüğü sağlar.

Hadi gelin bunları örnek bir proje yazarak pekiştirelim.Senaryomuzda adını bizim belirleyeceğimiz bir bileşen, bu bileşenin içerdiği tipleri belirlediğimiz dosya ve stil dosyasını komut yardımıyla oluşturacağız.

sıfırdan bir next js projesi oluşturalım.

npx create-next-app@latest

Öncelikle plop js’ yarn ile projemize dahil edelim.

yarn add plop -D

npm kullananlar bunu kullanabilir.

npm install --save-dev plop

Plop scriptimizi terminalden çalıştırmak için package.json dosyamıza ekleyelim

{  
  ...,  
  "scripts": {    
    ...,
    "plop": "plop"
  },
  ...
}

Sıra geldi kod şablonumuzu oluşturmaya. Bunu yaparken temel seviyede şablon oluşturmamıza olanak sağlayan handlebarsjs den faydalanıyoruz.Proje ana dizininde templates adında bir klasör oluşturup içine de şablon dosyalarımızı ekliyoruz.

template/{{name}}.tsx.hbs

import { {{pascalCase name}}Props } from "./{{name}}";
import  "./{{name}}.css";

const {{name}} = ({ className="" }:{{pascalCase name}}Props) => {

  return (
    <div className={`{{name}} ${className}`}>
      {{name}} component
    </div>
  );
};

export default {{name}};

template/{{name}}.ts.hbs

export interface {{pascalCase name}}Props {
 className?: string;
}

template/{{name}}.css.hbs

.{{name}} {
  background-color: "#FF5733";
}

Şablon dosyalarımızı da tamamladığımıza projemizin ana dizininde “plopfile.js” adında bir dosya oluşturabiliriz.Bu dosya bizim komutları ekleyeceğimiz kısım aslında.

plopfile.js

module.exports = function (plop) {
  plop.setGenerator("component", {
    description: "this is a skeleton plopfile",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Enter component name:"
      },
    ],
    actions: [
      {
        type: "addMany",
        destination: "app/components/{{camelCase name}}",
        templateFiles: "templates/*.hbs",
        base: "templates",
      },
    ]
  });
};

description: Komutun ne yaptığını açıklayan kısım.
prompts: Kullanıcıya sorulan soruları tanımladığımız kısım.
actions: Komutun çalıştıracağı işlemi belirleyen kısım.
actions/type: işlevin tipini belirlemede kulllanır. Mesela bizim yaptığımız örnekte tek bir komutla 3 dosya oluşturuyoruz. Bunu da addMany tipindeki action ile yapıyoruz. Tek dosya eklemek için add tipi kullanılır. Eğer dosyada değişiklik yapmak istiyorsak modify kullanılır.

Son olarak komutumuzu çalıştıralım:

yarn plop

Böylece tek bir komut kullanarak birbirine benzer bileşenleri hızlıca oluşturabiliriz :)

Ö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 😇