NPM 퓨즈박스(개발자를 위한 작동 방식)
번들은 이제 모든 최신 Node.js 애플리케이션의 툴킷에서 필수적인 도구가 되었습니다. 번들러 (Webpack, Rollup, Vite 등)는 코드와 자산을 관리하고 패키징합니다. 이러한 기술은 여러 개의 서로 다른 파일을 하나 또는 몇 개의 최적화된 번들로 병합하여 네트워크 요청 횟수를 줄이고 코드를 효율적으로 로드함으로써 성능을 향상시킵니다. 게다가 대부분의 번들에는 코드 분할, 핫 모듈 교체, 트리 셰이킹과 같은 추가 기능이 이미 포함되어 있어 개발자와 최종 사용자 모두에게 더 나은 경험을 제공합니다.
번들러는 빌드 도구 및 최신 JavaScript 표준과의 통합을 통해 리소스 전달을 최적화하고 원활한 배포 워크플로를 제공함으로써 확장 가능하고 유지 관리 가능한 애플리케이션을 구현하는 데 필수적인 요소입니다. 이 글에서는 IronPDF Node.js 라이브러리를 사용하는 번들러의 벤치마크 예제로 NPM fuse box를 사용하겠습니다.
FuseBox NPM 패키지는 가장 빠르고, 상황 중심적이며, 미래지향적인 번들러로서, 최신 웹 애플리케이션의 자산을 손쉽게 관리하고 번들링할 수 있도록 해줍니다. 개발자 효율성 측면에서 FuseBox 모듈 로더는 구성이 간편하여 개발자가 프로젝트 구축을 신속하게 시작할 수 있도록 도와줍니다. 이 프레임워크는 라이브 리로딩, 코드 분할, 트리 셰이킹 등 원하는 모든 기능을 지원하여 개발을 간편하게 하고 최종 결과물을 고도로 최적화합니다.
FuseBox는 JavaScript, TypeScript, CSS 및 이미지 등 다양한 파일 형식을 지원합니다. FuseBox 모듈 로더는 인기 있는 프레임워크 및 라이브러리와 원활하게 통합됩니다. 게다가, FuseBox는 프로젝트 요구 사항에 따라 기능을 확장하고 맞춤 설정할 수 있는 통합 플러그인 시스템을 갖추고 있습니다. FuseBox는 성능과 사용 편의성의 균형을 맞춰 개발 워크플로우 속도를 크게 향상시키고 프로덕션에 최적화된 패키지를 제공합니다. FuseBox가 완전히 새로운 차원으로 끌어올리고 있습니다.
FuseBox 프로젝트를 생성하고 구성하려면 다음 단계를 따르십시오.
FuseBox용 새 Node.js 프로젝트 초기화
프로젝트 디렉토리를 생성한 다음 Node.js 에서 해당 디렉토리를 엽니다.
mkdir fusebox-project
cd fusebox-project
npm init -ymkdir fusebox-project
cd fusebox-project
npm init -y퓨즈박스 설치 방법
fuse-box와 TypeScript를 사용하는 경우 TypeScript 와 같은 기타 종속성을 설치하세요.
npm install fuse-box typescript --save-devnpm install fuse-box typescript --save-devFuseBox 설정 파일을 생성합니다.
FuseBox를 구성하기 위한 fuse.js 파일을 만듭니다.
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();
});이 간단한 예제는 Node.js 환경에서 번들링 및 개발 작업을 수행하기 위한 FuseBox 구성 및 사용 방법을 보여줍니다. 예제는 먼저 'fusebox'와 'sparky'를 'fuse-box' 패키지에서 임포트하고, 그런 다음 Context 클래스를 정의하며 getConfig 메서드를 사용해 FuseBox 구성 객체를 반환합니다. 다음과 같은 설정을 구성합니다: 브라우저를 타겟으로 하고, src/index.ts를 진입 지점으로, src/index.html를 웹 인덱스의 템플릿으로 사용합니다. 마지막으로, 개발 서버 구성에는 HMR, 캐싱, 소스 맵 및 로그와 같은 최소한의 구성 옵션이 포함되어 있어 매우 빠르게 설정할 수 있습니다.
다음 단계는 Sparky 유틸리티를 사용하여 작업을 정의하는 것입니다. task('default')는 dist 디렉터리를 청소하고 FuseBox 구성을 가져와 개발 서버를 실행합니다. 마찬가지로, task('dist')는 dist 디렉터리를 청소하지만 제로 구성이며 대신 프로덕션 빌드를 실행합니다. 이러한 설정은 빌드 및 서버 자동화를 통해 개발 및 프로덕션을 효율적으로 관리하는 데 매우 유용합니다.
간단한 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>위의 HTML 템플릿은 FuseBox 프로젝트를 위한 간단한 페이지를 설정합니다. 여기에는 문자 인코딩 및 반응형 디자인 메타데이터가 포함됩니다. 플레이스홀더 $bundles는 번들된 자산이 올바르게 로드되도록 FuseBox가 올바른 스크립트와 스타일 태그로 동적으로 대체하여 JavaScript와 CSS가 최적화된 방식으로 로드됩니다.
TypeScript 파일을 생성하세요
// Set the HTML content of the body element
document.body.innerHTML = '<h1>Hello, FuseBox!</h1>';이 JavaScript 코드는 현재 웹 페이지의 body 요소에 HTML 콘텐츠를 설정합니다. <body> 태그 내부의 내용을 새 <h1> 헤딩 요소로 대체합니다. 제목란에는 "안녕하세요, FuseBox님!"이라고 표시되어 있습니다. 본질적으로, JavaScript 사용하여 웹 페이지에 콘텐츠를 동적으로 추가하거나 업데이트하는 매우 간단한 방법입니다.
TypeScript 구성
TypeScript 설정의 추가 구성을 포함할 tsconfig.json 파일을 생성합니다.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*"]
}완료되면 코드를 실행하세요. 해당 애플리케이션은 localhost:4444에서 호스팅됩니다.
우리는 지정된 로컬호스트 포트를 통해 해당 페이지를 볼 수 있습니다. 아래 스크린샷과 같이 표시될 것입니다.
IronPDF 소개합니다: PDF 생성기
PDF 문서의 생성, 수정, 변환 및 편집을 위해서는 강력한 Node.js 패키지인 IronPDF 활용하십시오. 이 라이브러리는 HTML을 PDF로 변환하거나 기존 PDF 파일을 편집하는 등 PDF와 관련된 다양한 프로그래밍 기반 작업에 활용됩니다. IronPDF PDF를 동적으로 생성하고 처리해야 하는 프로그램에 매우 유용한 도구입니다. 이 프로그램은 고품질 PDF 문서를 제작하기 위한 간단하고 유연한 솔루션을 제공합니다.
IronPDF 패키지를 설치하세요
Node.js IronPDF 기능을 활성화하려면 NPM을 사용하여 필요한 패키지를 설치하세요.
npm install @ironsoftware/ironpdfnpm install @ironsoftware/ironpdf퓨즈 박스 번들 ( IronPDF 포함) PDF
IronPDF 사용하는 Node.js 백엔드에 연결하고 프런트엔드 자산을 위해 FuseBox를 구성하는 방법은 다음과 같습니다.
Fuse.js 파일
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();이 스크립트는 서버 측 스크립트를 그룹화하기 위한 FuseBox 인스턴스를 설정합니다. fusebox 함수를 fuse-box 패키지에서 임포트한 다음, 특정 설정으로 FuseBox를 맞춤 설정합니다. '서버' 설정은 출력 결과가 웹 브라우저가 아닌 Node.js 환경을 위한 것임을 나타냅니다. entry: 'src/index.ts'는 번들링 절차를 시작하기 위한 주 TypeScript 파일을 가리킵니다.
dependencies: { ignoreAllExternal: false }는 외부 의존성이 간과되지 않도록 보장하며, 필요한 경우 번들에 추가됩니다. watch: true 기능은 소스 파일이 업데이트될 때마다 번들을 자동으로 다시 빌드할 수 있게 하여 개발 과정을 돕습니다. 마지막으로, cache: false는 캐시를 비활성화하여 최신 업데이트가 항상 빌드에 반영되도록 보장합니다. fuse.runDev() 명령은 이러한 설정으로 개발 서버를 실행합니다.
Index.ts 파일
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}`);
});이 스크립트는 Express 프레임워크를 사용하는 Node.js 서버를 구축하여 IronPDF 라이브러리로 PDF 파일을 생성합니다. 처음에는 서버의 작동을 위한 Express와 PDF 작업을 처리하기 위한 @ironsoftware/ironpdf를 포함하여 필요한 모듈을 포함합니다. 이 프로그램은 PDF 생성에 필수적인 라이선스 키를 사용하여 IronPDF 설정합니다. PDF의 HTML은 문자열로 선언되며, 사용자를 위한 기본적인 스타일과 세부 정보를 포함합니다.
다음으로 Express 애플리케이션이 개발되고 URL 경로 /generate-pdf가 설정됩니다. 이 경로에 대한 요청이 수신될 때마다 서버는 지정된 HTML 콘텐츠로부터 PDF를 생성하기 위해 IronPDF의 PdfDocument 클래스를 사용합니다. 그러면 해당 PDF 파일이 버퍼에 저장되고 올바른 콘텐츠 유형으로 클라이언트에 반환됩니다. 이 절차 중에 오류가 발생하면 서버는 500 상태 코드와 오류 메시지를 반환합니다. 궁극적으로 서버는 기본적으로 지정된 포트인 3000번 포트에서 수신 대기하도록 설정되어 있으며, 서버의 작동 상태를 확인하는 메시지를 기록합니다.
IronPDF 스크립트 번들링
이제 퓨즈 박스 번들링 스크립트를 실행할 수 있습니다.
이 프로그램은 여러 파일을 하나의 파일로 묶거나 압축합니다. 생성된 파일을 이용하여 스크립트를 실행할 수 있습니다.
위 파일들은 퓨즈 박스를 이용하여 생성된 축소된 파일들입니다.
축소된 파일은 일반 Node.js 파일처럼 실행할 수 있습니다.
라이선스
워터마크 없이 코드를 작동시키려면 라이선스 키가 필요합니다. 개발자는 여기에서 체험판 라이선스를 신청할 수 있습니다. 신용카드를 제공하지 않아도 발급받을 수 있습니다. 무료 체험판에 등록할 때는 이메일 주소만 입력하면 됩니다.
결론
FuseBox와 IronPDF 의 조합은 서버에서 강력한 PDF를 생성하고 프런트엔드에서 에셋을 패키징하는 데 상당한 영향을 미칩니다. FuseBox는 웹 리소스를 그룹화하고 개선하여 웹 앱을 더 쉽게 구축하고 출시할 수 있도록 지원합니다. 한편, IronPDF HTML 코드에서 바로 문서를 만들 수 있게 해주며 PDF 생성 기능도 뛰어납니다.
이러한 도구들을 함께 사용하면 온라인 앱의 성능이 향상되고 개발 프로세스 속도가 빨라집니다. 그들은 자산 관리와 PDF 생성이 서로 연동되도록 함으로써 이를 실현합니다. IronPDF 사용하여 PDF를 생성하고 FuseBox를 사용하여 패키지를 구성하면 개발자는 멋진 기능을 갖추고, 더 빠른 속도로 작동하며, 문서를 더욱 다양하게 활용할 수 있는 앱을 개발하고 배포할 수 있습니다.
Iron Software Windows, Android, MAC, Linux 등 다양한 환경에서 애플리케이션을 쉽게 개발할 수 있도록 도와주는 다양한 유형의 라이브러리를 제공합니다.
무료로 시작하세요
무료로 시작하세요
무료 라이브 데모 예약하기
신용카드나 계정 생성은 필요하지 않습니다.
