Module Bundlers
Module Bundlers․ ինչու են մեզ պետք (Webpack, Rollup, Parcel)
Երբ JavaScript-ը փոքր էր և պարզ, ծրագրերը բաղկացած էին ընդամենը մի քանի ֆայլերից։ Սակայն ժամանակի ընթացքում ծրագրերը դարձան ավելի բարդ և մեծ, և յուրաքանչյուր մաս սկսեց բաժանվել առանձին մոդուլների։ Այստեղ են ի հայտ գալիս module bundler-ները՝ գործիքներ, որոնք միավորում են բազմաթիվ ֆայլեր մեկ ընդհանուր ֆայլի մեջ։
Module bundler-ները թույլ են տալիս կառավարել մոդուլները, օպտիմիզացնել կոդը և պատրաստել այն բրաուզերում օգտագործման համար։
Webpack-ը ամենահայտնի և հզոր bundler-ներից մեկն է։ Այն ստեղծում է dependency graph (կախվածությունների ծառ) և հավաքում բոլոր մոդուլները մեկ կամ մի քանի բրաուզերի համար օպտիմիզացված ֆայլերի մեջ։
// Webpack-ի պարզ կոնֆիգուրացիա
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
},
mode: 'production',
};
Webpack-ը թույլ է տալիս նաև օգտագործել loader-ներ CSS-ի, նկարների և այլ ռեսուրսների համար։
Արտոնություններ՝
Rollup-ը ավելի թեթև bundler է, որն առաջնահերթություն է տալիս ES Modules-ին։ Այն շատ լավ է աշխատում գրադարանների կառուցման համար։
// Rollup-ի պարզ կոնֆիգուրացիա
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
plugins: [resolve()],
};
Արտոնություններ՝
Parcel-ը շատ հարմար bundler է, որը չի պահանջում բարդ կոնֆիգուրացիաներ։ Դա "zero configuration" մոտեցման ներկայացուցիչ է՝ պարզապես սկսում ես աշխատել։
// Parcel օգտագործելու համար պարզապես գրի
parcel index.html
Արտոնություններ՝
Module bundler-ները դարձել են ժամանակակից JavaScript ծրագրավորման անբաժանելի մաս։ Եթե աշխատում ես բարդ ծրագրերի վրա, առանց bundler-ի արդյունավետություն ապահովելը գրեթե անհնար է։ Ընտրությունը՝ Webpack, Rollup թե Parcel, կախված է քո նախագծի կարիքներից։