NPM fuse-box (Geliştiriciler İçin Nasıl Çalışır)

Bir paket, herhangi bir modern Node.js uygulamasının araç kitinde kritik bir araç haline gelmiştir. Paketleyiciler — Webpack, Rollup, Vite — kod ve varlıkları işler ve paketler. Birden çok farklı dosyayı bir veya birkaç optimize edilmiş pakete birleştirerek, ağ taleplerinin sayısını azaltarak ve kodun etkili bir şekilde yüklenmesini sağlayarak performansı artırır. Ayrıca, çoğu paketleyicide zaten kod ayırma, modül değiştirme ve ağaç sallama gibi ekstra özellikler vardır, bu da geliştirici ve son kullanıcı deneyimini artırır.

Paketleyiciler, kaynakların teslimini optimize ettiği ve sorunsuz dağıtım iş akışları sağladığı için yapı araçları ve modern JavaScript standartları ile entegrasyonları üzerinden ölçeklenebilir ve sürdürülebilir uygulamaların önemli etkinleştiricileridir. Bu makalede, bir paketleyici olarak NPM fuse box'u, IronPDF Node.js kütüphanesi ile bir benchmark örneği olarak kullanacağız.

FuseBox NPM paketi, modern web uygulamanızın varlıklarını yönetmenizi ve kolaylıkla paketlemenizi sağlayan en hızlı, bağlam odaklı ve en ileri düşünen paketleyicidir. Geliştirici verimliliği açısından, FuseBox modül yükleyicisi, geliştiricinin projeye başlamak için hızlı bir şekilde kurulum yapmasına yardımcı olan kolay bir yapılandırmaya sahiptir. Canlı yeniden yükleme, kod ayırma, ağaç sallama gibi istenen tüm özellikleri destekler, bu da geliştirmeyi kolaylaştırır ve nihai çıktıyı yüksek oranda optimize eder.

FuseBox birçok dosya türünü destekler: JavaScript, TypeScript, CSS ve resimler. FuseBox modül yükleyici, popüler framework'ler ve kütüphanelerle güzel bir şekilde entegre olur. Bunun üzerine, projenizin ihtiyaçlarına göre FuseBox'ı daha da genişletecek ve özelleştirecek bir entegre eklenti sistemine sahiptir. Kolay anlaşılır olması sayesinde yüksek performansı dengeleyerek, FuseBox geliştiricinin iş akışını önemli ölçüde hızlandırır ve prodüksiyon için optimize edilmiş bir paket sunar. FuseBox bunu tamamen yeni bir seviyeye taşıyor.

FuseBox projesi oluşturup yapılandırmak için şu adımları izleyin:

FuseBox için Yeni Bir Node.js Projesi Başlatma

Projeniz için bir dizin oluşturun ve ardından Node.js'te açın.

mkdir fusebox-project
cd fusebox-project
npm init -y

mkdir fusebox-project
cd fusebox-project
npm init -y

fuse-box Kurulumu

fuse-box ve TypeScript gibi diğer bağımlılıkları kurun.

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

FuseBox Yapılandırma Dosyası Oluşturma

FuseBox'u yapılandırmak için bir fuse.js dosyası oluşturun.

const { fusebox, sparky } = require('fuse-box');

class Context {
  // Method to return the FuseBox configuration
  getConfig() {
    return fusebox({
      target: 'browser',
      entry: 'src/index.ts',
      webIndex: {
        template: 'src/index.html',
      },
      devServer: true,
      hmr: true,
      cache: true,
      logging: {
        level: 'succinct',
      },
      sourceMap: true,
    });
  }
}

const { task, exec, rm } = sparky(Context);

// Define development task
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});

// Define production build task
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

const { fusebox, sparky } = require('fuse-box');

class Context {
  // Method to return the FuseBox configuration
  getConfig() {
    return fusebox({
      target: 'browser',
      entry: 'src/index.ts',
      webIndex: {
        template: 'src/index.html',
      },
      devServer: true,
      hmr: true,
      cache: true,
      logging: {
        level: 'succinct',
      },
      sourceMap: true,
    });
  }
}

const { task, exec, rm } = sparky(Context);

// Define development task
task('default', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runDev();
});

// Define production build task
task('dist', async (ctx) => {
  rm('dist');
  const fuse = ctx.getConfig();
  await fuse.runProd();
});

Bu basit örnek, bir Node.js ortamında paketleme ve geliştirme görevlerini gerçekleştirmek için FuseBox'un yapılandırması ve kullanımını içerir. Örnek, önce 'fusebox' ve 'sparky'yi 'fuse-box' paketinden içe aktarır, ardından bir sınıf Context tanımlar ve bu sınıf bir getConfig yöntemiyle bir FuseBox yapılandırma nesnesi döndürür. Şu ayarları yapılandırır: tarayıcıyı hedefler, giriş noktası olarak src/index.ts alır ve web endeksi için src/index.html şablonu kullanır. Son olarak, geliştirme sunucusunun yapılandırması, şu minimal yapılandırma seçenekleri ile birlikte gelir: HMR, önbellekleme, kaynak haritaları ve günlükler çok hızlı.

Bir sonraki adım, sparky yardımcı programını kullanarak görevler tanımlamak olacaktır. task('default'), dist dizinini temizler, FuseBox yapılandırmasını alır ve geliştirme sunucusunu çalıştırır. Benzer şekilde, task('dist') dist dizinini temizler ancak yapılandırma yapmadan üretim oluşturmasını çalıştırır. Kurulum, inşa ve yayını otomatikleştirerek geliştirme ve prodüksiyonu verimli bir şekilde yönetmede oldukça yardımcıdır.

Basit Bir HTML Dosyası Oluşturma

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FuseBox App</title>
</head>
<body>
  $bundles
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FuseBox App</title>
</head>
<body>
  $bundles
</body>
</html>

Yukarıdaki HTML şablonu, FaucetBox projesi için basit bir sayfa kurar. Karakter kodlaması ve duyarlı tasarım metadata içerecek şekilde ayarlanmıştır. Yer tutucu, $bundles, FuseBox tarafından dinamik olarak doğru script ve stil etiketleri ile değiştirilir, böylece demetlenen varlıklar doğru şekilde yüklenir ve JavaScript ile CSS optimize edilmiş şekilde yüklenir.

TypeScript Dosyası Oluşturma

// Set the HTML content of the body element
document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';

Bu JavaScript kod satırı, geçerli web sayfasının body elemanının HTML içeriğini ayarlamaktadır. İçeriği <body> etiketinin içindeki yeni bir <h1> başlık elemanıyla değiştirir. Başlıkta "Hello, FuseBox!" metni görüntülenir. Özünde, bir web sayfasında JavaScript kullanarak içerik eklemek veya güncellemek için çok basit bir yoldur.

TypeScript Yapılandırması

TypeScript ayarlarının ek yapılandırmasını tutmak için bir tsconfig.json dosyası oluşturun.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Bitirdikten sonra kodu çalıştırın. Uygulamayı localhost:4444 üzerinde barındırır:

Sayfayı verilen localhost portundan görüntüleyebiliriz. Aşağıdaki ekran görüntüsüne benzeyen bir şekilde gösterilecektir.

IronPDF: PDF Oluşturucu Tanıtımı

PDF belgelerinin oluşturulması, değiştirilmesi, dönüştürülmesi ve düzenlenmesi için sağlam Node.js paketi IronPDF kullanın. HTML'yi PDF'ye dönüştürmek ve önceden var olan PDF'leri düzenlemek gibi PDF'lerle ilgili birçok programlama temelli işlemde kullanılmaktadır. IronPDF, PDF'leri dinamik olarak oluşturması ve işlemesi gereken programlar için oldukça kullanışlı bir araçtır. Yüksek kaliteli PDF belgeleri oluşturmak için basit ve uyarlanabilir bir çözüm sunar.

npm i @ironsoftware/ironpdf

const { fusebox } = require('fuse-box');

const fuse = fusebox({
  target: 'server',
  entry: 'src/index.ts',
  dependencies: {
    ignoreAllExternal: false,
  },
  watch: true,
  cache: false,
});

// Run the development server
fuse.runDev();

const { fusebox } = require('fuse-box');

const fuse = fusebox({
  target: 'server',
  entry: 'src/index.ts',
  dependencies: {
    ignoreAllExternal: false,
  },
  watch: true,
  cache: false,
});

// Run the development server
fuse.runDev();

const express = require("express");
const IronPdf = require("@ironsoftware/ironpdf");

var config = IronPdf.IronPdfGlobalConfig;
config.setConfig({
  licenseKey: "", // Add your license key here
});

const htmlContent = `
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1 { color: navy; }
    p { font-size: 14px; }
  </style>
</head>
<body>
  <h1>User Details</h1>
  <p><strong>ID:</strong> 1</p>
  <p><strong>Name:</strong> Hendry</p>
</body>
</html>
`;

// Express setup for handling requests
const app = express();
app.get("/generate-pdf", async (req, res) => {
  const document = IronPdf.PdfDocument;
  console.log("Requesting: generate-pdf");

  // Generate PDF document
  try {
    let result = await document.fromHtml(htmlContent);
    const pdfBuffer = await result.saveAsBuffer();
    res.setHeader("Content-Type", "application/pdf");
    res.send(pdfBuffer);
  } catch (error) {
    console.error("PDF generation error:", error);
    res.status(500).send("PDF generation error");
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Sonuç

FuseBox ve IronPDF birleşimi, sunucu üzerinde güçlü PDF'ler oluşturma ve ön uçta varlıkları paketleme konusunda önemli bir etkiye sahiptir. FuseBox, web kaynaklarını gruplandırarak ve iyileştirerek web uygulamaları oluşturmayı ve başlatmayı kolaylaştırır. Bu arada, IronPDF, HTML kodundan doğrudan belgeler oluşturmanıza olanak tanır ve PDF oluşturmada iyidir.

Birlikte kullanıldığında, bu araçlar çevrimiçi uygulamaların daha iyi çalışmasını sağlar ve geliştirme sürecini hızlandırır. Bunu, varlıkları yönetme ve PDF'ler oluşturma işlemlerinin bir arada çalışmasını sağlayarak yaparlar. IronPDF ile PDF'ler yaparak ve FuseBox ile şeyleri paketleyerek geliştiriciler, harika özelliklere sahip, daha hızlı çalışan ve belgelerle daha fazlasını yapabilen uygulamalar oluşturup sunabilirler.

Iron Software, Windows, Android, MAC, Linux vb. gibi çeşitli ortamlar için uygulamalar oluşturmamıza yardımcı olan çeşitli tipte kütüphaneler sunar.