یادگیری Webpack در 15 دقیقه

بخش: اسکریپت ها 295 بار مشاهده شده دوشنبه ۳۰ مرداد ۹۶ 0 نظر ارسال شده
یادگیری Webpack در 15 دقیقه

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

در این آموزش نگاهی  به webpackمی اندازیم، bundler قدرتمند منبع باز و پیش پردازنده ای که قادر به مدیریت انواع مختلفی از وظایف مختلف است. به شما نحوه نوشتن ماژول ها، کد bundle و استفاده از برخی از افزونه های loader را نشان خواهیم داد.

webpack logo

 

چرا webpack؟

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

در اینجا برای کمک به تصمیم گیری شما عزیزان به برخی از مزایا و معایب webpack می پردازیم:

مزایا:

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

معایب:

  • برای مبتدیان توسعه وب مناسب نمی باشد.
  • کار با فایل های CSS، تصاویر و سایر منابع غیر JS در ابتدا گیج کننده می باشد.
  • مستند سازی آن می تواند بهتر باشد.
  • خیلی تغییر می کند، امروزه حتی اکثر آموزش های 2016 نیز به صورت قدیمی می باشند.

 

  1. نصب

ساده ترین راه نصب webpack با استفاده از package manager می باشد. ما با npm پیش می رویم اما به راحتی می توان آن را با Yarn یا hip جایگزین کنیم. در هر مورد باید Node.js را در دستگاه خود و یک package.json آماده نمایید. ترجیح می دهید آن را به صورت محلی (local) (بدون تگ( -g  نصب کنید. این کار از وجود همان نسخه webpack پروژه شما با دیگزا اطمینان حاصل می کند.

npm install webpack --save-dev

پس از نصب، بهترین راه برای راه اندازی webpack  از طریق اسکریپت Node.js می باشد.

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

اکنون با فراخوانی  npm run build از ترمینال، می توانیم بسته های webpack را به فایل های خود اضافه کنیم (گزینه -p برای تولید و استفاده از کد bundled است). npm run watch  در حال اجرا یک فرایند را شروع کرده که به طور خودکار فایل های ما را در زمانی که هر یک از آنها تغییر می کند bundles می نماید.

آخرین بخش از نصب این است که به webpack بگوییم کدام فایل ها را به هم پیوست دهد. روش توصیه شده برای انجام این کار ایجاد فایل config (پیکربندی) است.

 

  1. Webpack Config File

در اینجا به فایل config در فرم ساده تر خود نگاه می کنیم، فایل پیکربندی 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 (ورود) به webpack می گوید که فایل اصلی ما جاوا اسکریپت است. استراتژی های مختلفی برای پیکربندی نقاط ورود وجود دارد اما در اغلب موارد یک ورودی کافی می باشد.

در خروجی نام و مسیر bundle را مشخص می کنیم. پس از اجرای webpack ما تمام جاوا اسکریپت را در یک فایل با نام bundle.js خواهیم داشت. این تنها فایل اسکریپتی است که ما در HTML خود پیوند می دهیم:

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

این راه اندازی باید برای شروع ما کافی باشد. بعدها می توانیم برخی موارد را به آن اضافه کنیم، اما ابتدا ببینید چگونه ماژول ها کار می کنند.

 

  1. Webpack Modules

Webpack راه های متعددی برای کار با ماژول ها را فراهم می کند و اغلب اوقات شما برای انتخاب آن ها آزاد هستید. برای این آموزش از ES6 import syntax استفاده خواهیم کرد.

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

greeter.js

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

export default greet;

برای استفاده از این ماژول، باید آن را وارد کنیم و آن را در entry point (نقطه ورود) فراخوانی کنیم، حال اگر نگاه کنید،  فایل config برابر باindex.js  است.

 

index.js

import greet from './greeter.js';

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

حالا وقتی bundler  را با ساخت npm اجرا می کنیم و زمانی که HTML را در مرورگر باز می کنیم، این را می بینیم:

console greet

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

webpack flow 1

 

  1. نیاز به کتابخانه ها

می خواهیم برنامه این که در کدام  روز هفته هستیم را در مازول greeting (خوش آمدگویی) به کاربر نشان می دهد. برای انجام این کار  توسط وارد نمودن مستقیم ماژول greeter از  moment.js استفاده می نماییم.

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

npm install moment --save

سپس به راحتی دقیقا همانطور که ماژول های محلی را در نقطه قبل وارد نمودیم، کتابخانه را وارد ماژول greeter  می کنیم :

greeter.js

import moment from 'moment';

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

export default greet;

بعد از اینکه مجددا bundle به تغییرات اعمال شد، در کنسول مرورگر پیام های زیر را خواهیم داشت:

weekday greet

نمودار جریان ما اینگونه به نظر می رسد:

webpack flow 2

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

 

  1. Loaders

Loaders راه های webpack برای اجرای taskها در هنگام bundling پیش یا پس از پردازش فایل ها می باشند. به عنوان مثال، آنها می توانند TypeScript را کامپایل کرده، اجزای Vue.js  را بارگذاری کنند، قالب ها رندر نمایند و ... .

می خواهیم پروژه ای را که کد JS را برای خطاها بررسی می کند، اضافه کنیم. می توانیم این کار را با استفاده از بارگیر JSHint loader انجام دهیم که انواع شیوه های بد و نامناسب کد را می گیرد.

ابتدا باید JSHint و webpack JSHint loader را نصب کنیم:

npm install jshint jshint-loader --save-dev

حال قصد داریم چند خط را به فایل webpack config اضافه کنیم. این امر Loader را اولویت بندی می کند که چه نوع فایل هایی را چک کرده و چه فایل هایی را نادیده می گیرد.

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 شروع می شود، به ما یک لیست از هشدارها در ترمینال (که ما آن را نادیده می گیریم) نشان می دهد:

terminal warnings

از آنجا که moment.js در پوشه node_modules قرار دارد، توسط JSHint loader نمایش داده نمی شود:

webpack flow 3

 

بیشتر بخوانید

این مقدمه ما در مورد webpack است! از آنجا که این درس برای مبتدیان است، ما سعی نمودیم تنها مفاهیم مفید و شناخته شده webpack را پوشش دهیم.  امیدواریم این آموزش مفید بوده و خیلی گیج کننده نبوده باشد و تنها همان 15 دقیقه عنوان را صرف کرده باشید.

در آینده ای نزدیک، بخش دوم این آموزش را اضافه می کنیم، که به توضیح چگونگی ماژول های CSS و دیگر ویژگی های پیشرفته تر می پردازد. در ضمن، اگر می خواهید بیشتر درباره webpack یاد بگیرید، توصیه می کنیم از این منابع بسیار جذاب استفاده نمایید:

  • webpack.js.org: وب سایت رسمی برای پروژه، تعداد بسیاری راهنما و اسناد در آن وجود دارد.
  • Awesome webpack: لیست سرپرستی منابع Curated می باشد.
  • Webpack 2 - A full tutorial: تقریبا دو ساعت آموزش تصویری رایگان دارد.
  • Webpack Examples: دارای فهرستی از انواع webpack configuration می باشد. 
گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...