ابزارهای ساخت Build در حال حاضر تبدیل به یک توزیع یکپارچه از توسعه وب شده‌اند. باید گفت که دلیل این اتفاق پیچیده شدن اپلیکیشن‌های جاوااسکریپتی است. باندلرها به ما اجازه می‌دهند که کتابخانه‌هایی که برای یک پروژه یا اپلیکیشن وب نیاز داریم را پکیج‌بندی، کامپایل و دسته‌بندی نماییم. 

در این آموزش قصد داریم به ابزار Webpack نگاهی داشته باشیم. Webpack باندلر Bundler و پیش‌پردازنده‌ای قدرتمند و متن باز است که می‌تواند وظایف متفاوت بسیاری را مدیریت کند. ما در این آموزش به شما شیوه نوشتن ماژول‌ها، کدهای باندل و استفاده از چندین پلاگین بارگذار را نشان می‌دهیم. این آموزش برای افراد مبتدی تهیه شده است، اما داشتن دانش جاوااسکریپتی بسیار در یادگیری به شما کمک می‌کند. 

آموزش webpack

چرا Webpack

در حال حاضر، توسعه‌دهندگان باید از بین webpack، Gulp، Browserify، NPM scripts، Grunt و یا ده‌ها مورد مشابه دیگر یکی را انتخاب نمایند که این امر به سلیقه فردی و پروژه ای که روی آن کار میکند دارد.

در اینجا می‌توانید چندین نقطه قوت و ضعف را از وب‌پک مشاهده کنید تا بتوانید براساس آن انتخاب‌تان را به درستی انجام دهید:

نقاط قوت:

  • بهترین ابزار برای کار با اپلیکیشن‌های تک صفحه‌ای
  • قابلیت کار با هر دو syntax سینتکس ماژول import و require()
  • قابلیت بسیار پیشرفته برای code splitting
  • قابلیت Hot Reload برای توسعه سریع در فریمورک‌هایی مانند React، Vuejs و موارد مشابه.
  • محبوبترین ابزار ساخت در سال 2016.

نقاط ضعف:

  • کار کردن با آن برای افراد مبتدی کمی سخت است.
  • کار کردن با فایل‌های سی‌اس‌اس، تصاویر و منابع غیر جاوااسکریپتی در ابتدا کمی سخت است.
  • مستندسازی آن می‌تواند بهتر باشد.
  • تغییرات در آن بسیار به سرعت اتفاق می‌افتد.

1. نصب کردن

راحت‌ترین راه‌ برای نصب کردن Webpack استفاده از یک مدیریت پکیج است. ما از npm استفاده می‌کنیم. در هر حالت شما باید NodeJs نودجی‌اس را بر روی سیستم عامل‌ خود به صورت نصب شده همراه با یک فایل package.json داشته باشید. 

پیشنهاد می‌شود که آن را به صورت محلی (بدون استفاده از تگ -g) نصب کنید. بدین صورت هرکسی که روی پروژه شما کار کند مطمئن می‌شود که از یک نسخه وب‌پک استفاده می‌نماید. 

npm install webpack --save-dev

بعد از اینکه نصب انجام شد، بایستی که  webpack را با استفاده از یک اسکریپت NodeJs نودجی‌اس اجرا نمایید. این خطوط را به کدهای package.json اضافه نمایید:

//...
    "scripts": {
        "build": "webpack -p",
        "watch": "webpack --watch"
    },
//...

حال با دستور npm run build از طریق terminal یا cmd می‌توانیم باندل کردن فایل‌ها را شروع نماییم. با اجرای npm run watch فرایند شروع می‌شود که در آن هر تغییری به صورت خودکار باندل می‌شود.

آخرین مرحله از نصب ارائه فایل‌هایی است که قصد باندل کردن آن‌ها را داریم. راهکار پیشنهادی برای این حالت استفاده کردن از یک فایل پیکربندی است.

2. فایل کانفیگ Webpack

در بخش دوم قصد داریم که نگاهی به موارد پایه‌ای از فایل کانفیگ بیاندازیم. البته این صرفا نگاهی ابتدایی است، چرا که کانفیگ مربوط به webpack وب‌پک بسیار قدرتمند است و می‌تواند بسیار پیچیده باشد. 

در دایرکتوری اصلی مروبط به پروژه یک فایل با نام webpack.config.js ایجاد کنید:

webpack.config.js
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

گزینه entry نشان دهنده فایل اصلی javascript جاوااسکریپت است. استراتژی‌های مختلفی برای این قسمت وجود دارد، اما در بیشتر حالات استفاده از یک ورودی کافی است.

در قسمت output نام و مسیر مربوط به فایل باندل شده را قرار می‌دهیم. بعد از اینکه webpack وب‌پک را اجرا کردیم ما تمام فایل‌های جاوااسکریپتی را در یک فایل bundle.js خواهیم داشت. این تنها فایل جاوااسکریپتی است که ما در فایل HTML به آن لینک می‌دهیم:

<script src="./dist/bundle.js"></script>

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

3. ماژول‌های Webpack

webpack وب‌پک راه‌های مختلفی را برای کار با ماژول‌ها به همراه دارد، شما برای انتخاب هر مورد از آن آزاد هستید. برای این آموزش ما از import در EcmaScript اکمااسکریپت 6 استفاده می‌کنیم

ما قصد داریم یک ماژول که به کاربران سلام می‌کند را ایجاد کنیم. یک فایل greeter.js را ایجاد کرده و یک تابع ساده را به خروجی می‌فرستیم:

greeter.js
function greet() {
    console.log('Have a great day!');
};

برای استفاده از این ماژول ما باید آن را import کرده و آن را در قسمت entry مربوط به فایل کانفیگ که همان index.js است، اضافه نماییم:

index.js
import greet from './greeter.js';

console.log("I'm the entry point");
greet();

حال اگر Bundler باندلر را از طریق npm run build اجرا کنیم و فایل html را در مرورگر اجرا نماییم، خروجی زیر را مشاهده می‌کنیم:

آموزش webpack

فایل entry و ماژول greeter با همدیگر compile کامپایل شده و یک فایل به نام bundle.js را به وجود آوردند که در نهایت در مرورگر نیز اجرا شدند. در زیر می‌توانید یک فلوچارت ساده از این حالت را مشاهده کنید:

آموزش webpack

4. کتابخانه‌های لازم

برای مثال ما می‌خواهیم روزی که اپلیکیشن به کاربران سلام و روز خوش می‌گوید را بدانیم. برای اینکار از moment.js استفاده می‌کنیم. بنابراین باید آن را به صورت مستقیم در ماژول greeter قرار دهیم.

ابتدا نیاز است که کتابخانه مورد نظر را از طریق npm نصب کنیم:

npm install moment --save

بعد از آن در ماژول greeter کتابخانه را درست مانند حالت قبل import می‌کنیم:

greeter.js
import moment from 'moment';

function greet() {
    var day = moment().format('dddd');
    console.log('Have a great ' + day + '!');
};

export default greet;

بعد از اینکه تغییرات را باندل کردیم و صفحه را باری دیگر اجرا نمودیم، پیام‌های زیر را مشاهده خواهیم کرد. 

آموزش webpack

دیاگرام ما در این حالت به صورت زیر خواهد بود:

آموزش webpack

راه‌های حرفه‌ای‌تری برای قرار دادن کتابخانه در یک پروژه وجود دارد، حتما در دوره های آموزشی که در نظر داریم در این مورد بیشتر بحث و گفتگو خواهیم کرد.

5. لودرها - Loaders

لودرها در webpack وب‌پک راهی برای اجرای وظایف مختلف در حین باندلینگ و پردازش‌های دیگر هستند. برای مثال آن‌ها می‌توانند TypeScript تایپ‌اسکریپت را کامپایل کرده، کامپوننت‌های VueJS ویوجی‌اس را بارگذاری نموده، قالبی را رندر کرده و کارهای بسیار دیگری را انجام دهند. بیشتر لودرها توسط جامعه طرفدار و توسعه‌دهنده وب‌پک نوشته شده است. برای مشاهده لیست کاملی از این لودرها می‌توانید این لینک را مشاهده کنید.  

تصور کنید که قصد اضافه نمودن یک linter برای بررسی کردن خطاهای موجود در کدهای JavaScript جاوااسکریپت را داریم. می‌توانیم این کار را با افزودن JSHint loader به پروژه‌مان انجام دهیم که تمام خطاها و مشکلات موجود را از کدها پیدا می‌کند. 

ابتدای کار نیاز است که هر دوی JSHint و JSHint loader را نصب کنیم:

npm install jshint jshint-loader --save-dev

بعد از آن چند خط کد را به فایل کانفیک webpack وب‌پک باید اضافه نماییم. این کدها لودر را راه‌اندازی کرده و فایل‌های مورد نیاز برای بررسی را مشخص می‌کند. همچنین می‌توانیم فایل‌هایی که باید پشت سر گذاشته شوند را تعیین کنیم.

webpack.config.js
var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};

حال وقتی که وب‌پک شروع می‌شود، لیستی از هشدارها موجود را در ترمینال به ما نشان می‌دهد:

آموزش webpack

از آنجایی که کتابخانه moment.sj در پوشه node_modules قرار می‌گیرد دیگر توسط لودر JSHint بررسی نمی‌شود:

آموزش webpack

منبع

لاراول
فقط
خوش آمدید!
ایجاد حساب کاربری