NPM fuse-box (Jak działa dla deweloperów)

Pakiet stał się kluczowym narzędziem w zestawie narzędzi każdej nowoczesnej aplikacji Node.js. Narzędzia do pakowania — Webpack, Rollup, Vite — obsługują i pakują kod oraz zasoby. Łączą one wiele różnych plików w jeden lub kilka zoptymalizowanych pakietów, poprawiając wydajność poprzez zmniejszenie liczby żądań sieciowych i zapewnienie efektywnego ładowania kodu. Ponadto większość pakietów zawiera już dodatkowe funkcje, takie jak dzielenie kodu, wymiana modułów na gorąco i tree shaking, które poprawiają komfort pracy programisty i użytkownika końcowego.

Pakiety są kluczowymi elementami umożliwiającymi tworzenie skalowalnych i łatwych w utrzymaniu aplikacji dzięki integracji z narzędziami do kompilacji i nowoczesnymi standardami JavaScript, ponieważ optymalizują dostarczanie zasobów i usprawniają procesy wdrażania. W tym artykułe wykorzystamy NPM fuse box jako przykładowy bundler z biblioteką IronPDF for Node.js.

Pakiet FuseBox NPM to najszybszy, oparty na kontekście i najbardziej przyszłościowy bundler, który pozwala z łatwością zarządzać zasobami nowoczesnych aplikacji internetowych i łączyć je w pakiety. Jeśli chodzi o wydajność programisty, moduł ładujący FuseBox charakteryzuje się prostą konfiguracją, która pomaga programistom w szybkim przygotowaniu środowiska do rozpoczęcia pracy nad projektem. Obsługuje wszystkie pożądane funkcje: przeładowywanie na żywo, dzielenie kodu, tree shaking i tak dalej, co ułatwia programowanie i zapewnia wysoką optymalizację końcowego wyniku.

FuseBox obsługuje wiele typów plików: JavaScript, TypeScript, CSS oraz obrazy. Moduł ładujący FuseBox doskonale integruje się z popularnymi frameworkami i bibliotekami. Ponadto posiada zintegrowany system wtyczek, który pozwoli na dalsze rozszerzenie i dostosowanie FuseBox do potrzeb Twojego projektu. Łącząc wydajność z łatwością użytkowania, FuseBox znacznie przyspieszy proces tworzenia oprogramowania i zapewni pakiet zoptymalizowany pod kątem produkcji. FuseBox przenosi to na zupełnie nowy poziom.

Aby utworzyć i skonfigurować projekt FuseBox, wykonaj następujące czynności:

Skonfiguruj nowy projekt Node.js dla FuseBox

Utwórz katalog dla swojego projektu, a następnie otwórz go w Node.js.

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

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

Aby zainstalować fuse-box

Zainstaluj fuse-box i inne zależności, takie jak TypeScript, jeśli z nich korzystasz.

npm install fuse-box typescript --save-dev

npm install fuse-box typescript --save-dev

Utwórz plik konfiguracyjny FuseBox

Utwórz plik fuse.js do konfigurowania FuseBox.

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();
});

Ten prosty przykład przedstawia konfigurację i sposób użycia FuseBox do wykonywania zadań związanych z pakowaniem i programowaniem w środowisku Node.js. Przykład najpierw importuje 'fusebox' i 'sparky' z pakietu 'fuse-box', a następnie definiuje klasę Context z metodą getConfig, która zwraca obiekt konfiguracji FuseBox. Konfiguruje następujące ustawienia: celuje w przeglądarkę, przyjmuje src/index.ts jako punkt wejścia i src/index.html jako szablon dla indeksu sieciowego. Wreszcie, konfiguracja serwera deweloperskiego obejmuje następujące minimalne opcje konfiguracyjne: HMR, buforowanie, mapy źródłowe i logi bardzo szybko.

Kolejnym krokiem będzie zdefiniowanie zadań przy użyciu narzędzia sparky. Funkcja task('default') czyści katalog dist, pobiera konfigurację FuseBox i uruchamia serwer deweloperski. Podobnie, task('dist') czyści katalog dist, ale nie posiada konfiguracji i zamiast tego uruchamia budowę produkcyjną. To rozwiązanie jest bardzo pomocne w efektywnym zarządzaniu rozwojem i produkcją poprzez automatyzację kompilacji i wdrażania.

Utwórz prosty plik 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>

<!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>

Powyższy szablon HTML tworzy prostą stronę dla projektu FuseBox. Obejmuje to metadane dotyczące kodowania znaków i responsywnego projektowania. Placeholder $bundles jest dynamicznie zastępowany przez FuseBox odpowiednimi znacznikami skryptów i stylów, aby zapewnić, że zgrupowane zasoby są prawidłowo ładowane, pozwalając JavaScript i CSS ładować się w zoptymalizowany sposób.

Utwórz plik TypeScript

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

Ta linia kodu JavaScript ustawia zawartość HTML elementu body bieżącej strony internetowej. Zastąpi zawartość wewnątrz znacznika <body> nowym elementem nagłówkowym <h1>. Tekst w nagłówku brzmi: "Hello, FuseBox!". W istocie jest to bardzo prosty sposób na dynamiczne dodawanie lub aktualizowanie treści na stronie internetowej przy użyciu JavaScript.

Konfiguracja TypeScript

Generuj plik tsconfig.json do przechowywania dodatkowej konfiguracji ustawień TypeScript.

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

Po zakończeniu uruchom kod. Aplikacja jest hostowana na localhost:4444:

Możemy wyświetlić stronę z podanego portu localhost. Będzie to wyglądało tak, jak na poniższym zrzucie ekranu.

Przedstawiamy IronPDF: PDF Creator

Do tworzenia, modyfikacji, konwersji i edycji dokumentów PDF wykorzystaj solidny pakiet Node.js IronPDF. Jest wykorzystywany w wielu operacjach programistycznych związanych z plikami PDF, takich jak konwersja HTML do PDF oraz edycja istniejących plików PDF. IronPDF to niezwykle przydatne narzędzie dla programów, które muszą dynamicznie generować i przetwarzać pliki PDF. Oferuje proste i elastyczne rozwiązanie do tworzenia wysokiej jakości dokumentów PDF.

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}`);
});

Wnioski

Połączenie FuseBox i IronPDF ma znaczący wpływ na tworzenie solidnych plików PDF na serwerze i pakowanie zasobów w interfejsie użytkownika. FuseBox ułatwia tworzenie i uruchamianie aplikacji internetowych poprzez grupowanie i ulepszanie zasobów internetowych. Z kolei IronPDF pozwala tworzyć dokumenty bezpośrednio z kodu HTML i świetnie sprawdza się przy tworzeniu plików PDF.

W połączeniu narzędzia te poprawiają działanie aplikacji internetowych i przyspieszają proces tworzenia oprogramowania. Osiągają to poprzez zapewnienie, że zarządzanie zasobami i tworzenie plików PDF współdziałają ze sobą. Korzystając z IronPDF do tworzenia plików PDF oraz FuseBox do pakowania plików, programiści mogą tworzyć i udostępniać aplikacje, które mają fajne funkcje, działają szybciej i oferują więcej możliwości w zakresie obsługi dokumentów.

Iron Software oferuje różnego rodzaju biblioteki, które pomagają nam w łatwym tworzeniu aplikacji dla różnych środowisk, takich jak Windows, Android, MAC, Linux itp.