تا %60 تخفیف خرید برای 2 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش Webpack قسمت 5: Loader ها، Plugin ها و babel-loader

ضمیمه ها

WebpackSample.rar

یکی از مهمترین یا بهتره بگیم دو مورد از مهمترین ویژگی های Webpack که خیلی مورد استفاده قرار میگیرن Loader ها و Plugin ها هستن. به طور خلاصه میشه گفت Webpack بدون Loader ها و Plugin ها هیچ کاربردی نداره و این دو مورد نقش قلب Webpack رو بازی می کنن. در حقیقت Loader ها و Plugin ها این قدرت رو به Webpack میدن که کارهایی ماند پردازش فایل ها مانند فایل های css، ایجاد تغییر در ساختار فایل ها و ایجاد خروجی در شکل های مختلف رو انجام بده. در این بخش و چند قسمت پیش رو با Loader ها و Plugin ها آشنا شده و چند مثال هم از موارد پرکاربرد میزنیم.

تفاوت Loader با Plugin

در اینجا شاید به نظر بیاد که Loader و Plugin شبیه هم هستند و هر دو یکسری قابلیت ها به Webpack اضافه می کنن. اما یکسری تفاوت ها وجود داره. کاری که Loader ها انجام میدن پردازش فایل هایی مانند فایل های TypeScript و SASS و ترجمه اون ها هست، کار Loader ها مثل کامپایلر یا مفسر هایی هست که در زبان های برنامه نویسی استفاده میشن.
اما Plugin ها، هر کاری که بوسیله Loader ها نمیشه انجام داد بوسیله Plugin ها قابل انجام هست، برای مثال شاید ما از یک Loader برای پردازش فایل های SASS یا استفاده از استایل های css استفاده کنیم، ولی بخواییم این استایل ها در یک فایل جداگانه ایجاد بشن، Loader وظیفه پردازش فایل ما و ایجاد خروجی مورد نظر ما رو داره و پلاگین هم وظیفه ایجاد فایل. تفاوت دیگه ای که وجود داره اینه که Plugin ها مانند یک شئ عمل میکنن (منظور شئ در برنامه نویسی شئ گرا هست) که در قسمت های بعدی کامل با این موضوع آشنا میشید. ما در این بخش و قسمت های دیگه با بعضی از پرکاربرد ترین Loader ها و Plugin های موجود در Webpack آشنا میشیم.

برای استفاده از Loader ها و Plugin ها معمولاً سه مرحله رو باید طی کنید:

  1. نصب Loader یا Plugin مورد نظر بوسیله npm
  2. استفاده از require برای استفاده از Plugin نصب شده (این کار معمولاً برای Loader ها انجام نمیشه)
  3. استفاده از Loader یا Plugin (نکته ای که باید اینجا گفته بشه، حتماً باید مستندات مربوط به Loader یا Plugin رو بخونید، معمولاًتمامی پلاگین ها و لودرها مستندات کاملی دارن و هیچ برنامه نویسی کدهای مربوطه رو حفظ نمیکنه، چون بوسیله یک کپی و پیست میشه از کد استفاده کرد. اما اینکه بدونید کدی که استفاده می کنید چجوری کار میکنه خیلی مهمه)

در ادامه با اولین Loader یعنی Babel-Loader آشنا میشیم.

استفاده از Babel-Loader

فرض کنیم که برای نوشتن کدهای JavaScript از استاندارد ECMAScript 6 استفاده می کنیم که توسط بعضی مرورگرها پشتیبانی نمیشه، مخصوصاً مرورگرهای قدیمی. به صورت پیش فرض Webpack کدهای مربوط به import و export رو به دستورات دیگه تبدیل میکنه، اما با بقیه کدهایی که می نویسیم کاری نداره و اگر کد ما مبتنی بر ES6 نوشته شده باشه روی برخی از مرورگرها به مشکل برمیخوریم. برای رفع این مشکل از Babel-Loader استفاده می کنیم که کدما رو از استاندارد ES6 به ES6 تبدیل می کنه.
برای استفاده از Babel ابتدا باید loader مربوط رو نصب کنیم. برای نصب این loader از دستور npm زیر استفاده می کنیم:

npm install --save-dev babel-loader @babel/core @babel/preset-env

باز هم میگم، نیازی به حفظ کردن تمامی این دستورات نیست و شما بوسیله مستندات هر Loader یا plugin میتونید به این موارد دسترسی داشته باشید.

در قدم بعدی برای استفاده از babel-loader و تبدیل کدهای ES6 به ES5 فایل webpack.config.js رو باید تغییر بدیم. زیر بخش output، بخش جدیدی با نام module اضافه می کنیم و تنظیمات مربوط به babel-loader رو به صورت زیر انجام میدیم:

output: {
 filename: "application.js",
 path: path.resolve(__dirname, 'build')
},
module: {
 rules: [
 {
  test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
   loader: 'babel-loader',
   options:{
    presets: ['@babel/preset-env']
   }
  }
 }
 ]
}

شاید کمی کد بالا به نظر پیچیده و ترسناک بیاد، اما زیاد هم پیچیده نیست، در قسمت rules که زیر مجموعه module هست، ما تنظیمات مربوط به loader ها رو قرار میدیم که در اینجا تنظیمات مربوط به babel-loader هست. در قسمت test مشخص میکنیم که این loader بر روی چه فایل هایی اعمال میشه، بوسیله RegEx مشخص کردیم که فایل های mjs یا js باید توسط این loader پردازش بشن. در قسمت exclude مشخص کردیم که فایل های داخل پوشه های node_modules و bower_components نباید توسط babel پردازش بشن. در قسمت use هم مشخص کردیم که babel-loader باید توسط این rule استفاده بشه. در بخش presets هم تنظیمات پیش فرضی که babel استفاده می کنه رو روی babel/preset-env قرار دادیم که برای ایجاد خروجی استفاده میشه.
در ادامه فایل greeting.js رو به صورتی تغییر میدیم که از دستورات ES6 داخلش استفاده شده باشه. برای اینکار متن داخل alert رو تغییر میدیم و از قابلیت string interpolation استفاده می کنیم:

function sayHello(){
 let website = 'TOSINSO';
 alert(`Hello Webpack! This is from ${website}. I'm watching you!`);
}

export { sayHello };

دستور npm run build رو اجرا می کنیم و میبینیم که کد ایجاد شده مبتنی بر استاندارد ES5 هست که این تبدیل توسط babel انجام شده:

آموزش Webpack

حالا دیگه می تونیم بدون نگرانی کدهامون رو مبتنی بر ES6 بنویسیم و خیالمون راحت باشه که babel کار تبدیل رو برای ما انجام میده.

در قسمت بعد در مورد نحوه فعال سازی قابلیت debugging در پروژه های مبتنی بر webpack صحبت می کنیم و اینکه چطور می تونیم فایل های Source Map رو به صورت خودکار ایجاد کنیم.

نویسنده: حسین احمدی
منبع: جزیره طراحی وب توسینسو
هر گونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده ممنوع است

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند