بسته‌بندی (Bundling) جاوا اسکریپت

باندلینگ یا بسته‌بندی یکی از مراحل توسعه در زبان جاوا اسکریپت است.

در توسعه مدرن جاوا اسکریپت، کد شما وابستگی زیادی به ماژول‌های جاوا اسکریپتی دیگر دارد که معمولا در مسیر node_modules ذخیره شده‌اند.

اما در نهایت مرورگر به چند فایل جاوا اسکریپت که همه نیازمندی‌های اپلیکیشن را شامل می‌شود نیاز دارد. بنابراین کد نوشته شده توسط شما و همه پیش نیازهای آن که در مسیر node_modules قرار دارد باید در چند فایل جاوا اسکریپت نهایی ذخیره شوند.

ابزارهای Bundling با همین منظور توسعه داده شده‌اند. برای مثال ابزار esbuild به صورت زیر کدها را بسته‌بندی می‌کند.

مثال برای ESBuild

کد شما که به پکیج‌های react و react-dom نیاز دارد را در نظر بگیرید:

npm install react react-dom

فایل app.jsx شامل کد زیر است:

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

باندل کردن کد توسط esbuild:

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

این کد دیگر به مسید node_modules نیاز ندارد و همه چیز در فایل out.js قرار گرفته است. آن را توسط دستور node out.js اجرا کنید.

<h1 data-reactroot="">Hello, world!</h1>