فرصت تخفیف ها تموم شد!! اما صبر کنید شاید تا
00 00 00
فرصت جدیدی پیدا کنید!

آموزش Webpack قسمت 3: نوشتن کدهای Modular

حسین احمدی
حسین احمدی
0 پسند
84 بازدید
0 نظر
3 ماه قبل

ضمیمه ها

WebpackSample.rar

تا این قسمت از آموزش Webpack، ما با مفاهیم اولیه Webpack و نحوه استفاده از اون آشنا شدیم. در ادامه با نحوه نوشتن کدهای Modular آشنا خواهیم شد. در قسمت های قبلی ما یک فایل با نام index.js ایجاد کردیم و یک خط کد ساده داخل آن نوشتیم. اما اگر کدهایی که می نویسیم زیاد باشه، باید این کدها رو توی چندین فایل تقسیم کنیم و بعد به بوسیله Webpack این کدها رو داخل یک فایل ترکیب کنیم. از پروژه ای که در قسمت های قبلی ایجاد کردیم در این بخش استفاده می کنیم. در ابتدا داخل پوشه src یک فایل با نام greeting.js ایجاد کرده و یک function با نام sayHello داخلش تعریف می کنیم:

function sayHello(){
    alert("Hello Webpack! This is from greeting.");
}

حالا برای اینکه بتونیم از تابع sayHello داخل فایل index.js استفاده کنیم، با ابتدا تابع sayHello رو export کنیم و بعد داخل فایل index عملیات import رو انجام بدیم. قابلیت export و import کردن در نسخه ES6 جاواسکریپت اضافه شده که خوشبختانه Webpack قابلیت شناسایی این کدها رو هم داره. در ابتدا از CommonJS استفاده می کنیم و در ادامه روش ES6 رو هم توضیح میدیم. برای export کردن خط زیر رو به فایل greeting.js اضافه می کنیم:

module.exports = sayHello;

در فایل index.js کدهای قبلی رو حذف کرده و کدهای زیر رو جایگزین می کنیم:

var sayHello = require('./greeting.js');

sayHello();

خط اول کد بالا بخش export شده در فایل greeting.js رو برای ما import میکنه و بعد می تونیم عملیات فراخوانی تابع sayHello رو انجام بدیم. دقت کنید که ما برای مشخص کردن مسیر فایل از ./ استفاده کردیم که اشاره به مسیری داره که فایل index.js در اون قرار داره، به این دلیل که فایل index.js و greeting.js در کنار هم هستند.حالا بوسیله دستور npm عملیات build رو انجام میدیم:

D:\WebpackSample>npm run build

حالا فایل index.html رو در مرورگر باز می کنیم و خواهیم دید که خروجی دستور alert تغییر کرده:

آموزش Webpack

حالا برای روش ES6 کد greeting.js رو به صورت زیر تغییر میدیم:

function sayHello(){
 alert("Hello Webpack! This is from greeting.");
}

export { sayHello };

و کد فایل index.js رو به صورت زیر تغییر میدیم:

import { sayHello } from './greeting.js';

sayHello();

در ادامه دستور build رو اجرا می کنیم:

D:\WebpackSample>npm run build

عملیات build با موفقیت انجام شده و فایل main.js برای ما ایجاد می شود. نکته ای که وجود داره میشه نام تابع sayHello رو به نام دیگه در زمان import کردن تغییر داد:

import { sayHello as greeting } from './greeting.js';

دو نکته اینجا وجود داره که باید بهش دقت کرد:

  1. اگر در قسمت نام فایل ./ رو ننویسیم پیام خطا دریافت می کنیم، چون به صورت خودکار پوشه node_modules برای جستجو در نظر گرفته میشه
  2. میشه پسوند فایل یعنی .js رو ننوشت، به این خاطر که webpack به صورت پیش فرض به دنبال فایل هایی با پسوند .js میگرده.

در این قسمت با نحوه نوشتن کدها به صورت modular آشنا شدیم، در قسمت بعدی با نحوه ایجاد فایل configuration برای webpack و نحوه استفاده از اون آشنا خواهیم شد.

کدهای این مطلب رو می تونید از بخش ضمیمه ها در ابتدای مطلب دانلود کنید

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

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

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