فصل هجدهم: کار با ماژول در اکما اسکریپت

سناریوی را تصور کنید که در آن نیاز است از یک بخش از کدهای جاوا اسکریپت در چند جای برنامه استفاده کنید.

در اکما اسکریپت 6 از ماژول ها برای اینکار استفاده می شود.

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

به بیان ساده ماژول ها کمک می کنند تا کدهایتان را در یک فایل نوشته و تنها آن بخش از کد را که باید توسط دیگر بخش های کد برنامه قابل دسترسی باشد، نمایش دهید.

ماژول های اکما اسکریپت 6 برای اجرا در مرورگر باید به کدهای ES5 کامپایل (transpile) شوند. transpile  فرآیندی است که در آن کدهای یک زبان به کدهای معادل نسخه های قبل تر یک زبان تبدیل می شوند.

Transpiler ماژول های اکما اسکریپت، ابزاری است که ماژول های اکما اسکرپیت تان را گرفته و آن را به کدهای ES5 سازگار با سبک های AMD یا CommonJS کامپایل می کند.

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

همچنین می توانید از ابزارهای Grunt، Gulp، Babel، یا transpiler های دیگر برای کامپایل ماژول ها در زمان ساخت برنامه استفاده کنید.

برای اهداف نمایشی در این مقاله از Node.js برای کامپایل و اجرای کد روی یک محیط کنسول استفاده میکنیم تا به راحتی مفهوم آن را درک کنید.

Export کردن یک ماژول

برای این که بتوان از یک اسکریپت به عنوان ماژول استفاده کرد باید از کلمه کلیدی export استتفاده کنیم. در مثال زیر یک ماژول را export می کنیم.

Export کردن یک مقدار یا عنصر با استفاده از export default

export default element_name

Export کردن چندین مقدار یا عنصر

export {element_name1,element_name2,....}

واردکردن(import) یک ماژول

برای استفاده از یک ماژول باید آن را به برنامه import کنیم که این کار توسط کلمه کلیدی import انجام می شود.

Import کردن یک مقدار یا عنصر

import element name from module_name

Import کردن چندین مقدار یا عنصر

import {element_name1,element_name2,....} from module_name

فرض کنید یک فایل جاوا اسکریپت به نام Message.js دارید که یک متد به نام printMsg() در آن قرار دارد.برای استفاده مجدد از قابلیت های این متد خط زیر را به فایل Messsage.js اضافه کنید.

export default printMsg

فایل اسکریپتی که قصد استفاده از این متد را دارد user.js است.در این فایل متد printMsg() را از ماژول Message، import می کنیم.

import printMsg from './Message.js'

نکته: برای استفاده از چندین عنصر در یک دستورexport باید هر عنصر را با یک علامت کاما (،( از هم جدا کنیم.برای import چند عنصر هم همین کار را می کنیم.

مثال: تعریف و استفاده از ماژول های ES6

تعریف یک ماژول: message_module.js

function display_message() { 
   console.log("Hello World") 
} 
export default display_message

وارد کردن یک ماژول: consume_module.js

import display_message from './MessageModule.js' 
display_message()

نصب es6-module-transpiler توسط npm با دستور زیر انجام می گیرد.

npm install -g es6-module-transpiler

فرض کنیم که ساختار دایرکتوری پروژه های جاوااسکریپت مان مطابق زیر است:

D:/ 
ES6/ 
   scripts/ 
      app.js 
      utility.js 
   out/

در کد بالا، کدهای اکما اسکرپیتمان در دایرکتوری scripts قرار می گیرد. باید کدهای ES6 را به ES5 تبدیل و آنها را در این دایرکتوری ذخیره کنیم. برای اینکار مراحل زیر را انجام بدهید.

مرحله 1: به دایرکتوری D:/ES6/Scripts رفته و کدهای ES6 آن را به سبک CommonJS،  transpile می کنیم. همچنین می توانید کدها را با سبک AMD، transpile کرده و آنها را به همان شکل در مرورگر اجرا کنید.

کدهای زیر را در پنجره Node تایپ کرده تا کدهای به سبک CommonJS ، transpile شوند.

compile-modules convert -I scripts -o out Message_module.js 
   consume_module.js -format commonjs

دستور بالا تمام فایل های جاوا اسکریپت در دایرکتوری Scripts را transpile کرده و آنها را در یک زیر دایرکتوری قرار می دهد.

مرحله 2 : کدهای اسکرپیت را اجرا کنید:

cd out 
node consume_module.js

خروجی

Hello World

یک ماژول می تواند دوباره export شود. به طور مثال کدهایی که یک ماژول را import کرده، می تواند خودش هم export شود.