ماژول ES – انجمن DEV

این وبلاگ در ادامه ماژول قبلی The Module System commonJS است. در این پست وبلاگ، ماژول ES و تفاوت بین ماژول ESM و CommonJS را پوشش خواهم داد.

سیستم ماژول ES

چگونه به مفسر Node js بگوییم که یک ماژول داده شده را به عنوان ماژول ES به جای ماژول CommonJs در نظر بگیرد:

1. نگه داشتن فایل پسوند به عنوان .mjs بجای .js
2. اضافه كردن "type":"module" یک فیلد در نزدیکترین بسته والد.json

صادرات و واردات نام دارد

توجه – ماژول ES از کلمه‌ی مفرد export در مقابل کلمه جمع (exports و module.exports) که توسط ماژول commonJS استفاده می‌شود، استفاده می‌کند.

در یک ماژول ES همه چیز به صورت پیش فرض خصوصی است و فقط موجودیت های صادر شده به صورت عمومی از ماژول های دیگر قابل دسترسی هستند.

کلمه کلیدی صادرات را می توان در مقابل نهادهایی که می خواهیم در دسترس کاربران ماژول قرار دهیم استفاده شود.

//export a function
export function log(message){
    console.log(message);
}

//export a constant 
export const DEFAULT_LEVEL='info'

//export an object as 'LEVELS'
export const LEVELS={
error:0,
debug:1,
warn:2,
data:3,
info:4
}

//export class as logger

export class logger{
    constructor(name){
        this.name=name;
    }

    log(message){
        console.log(`${this.name} ${message}`);
    }
}

اگر بخواهیم موجودیت ها را از یک ماژول وارد کنیم، می توانیم از کلمه کلیدی import استفاده کنیم

import * as loggerModule from './logger.js'
console.log(loggerModule)

PS: ما می‌توانیم از نحو ماژول ES (یعنی عبارت‌های import و صادرات) در Node.js با فایل‌هایی که دارای یک .js پسوند، اما باید مطمئن شوید که Node.js برای پشتیبانی از ماژول های ES پیکربندی شده است.

در ماژول ES، تعیین پسوند ماژول های وارد شده بر خلاف ماژول CommonJS مهم است.

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

import {log} from './logger.js'

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

import {log,logger} from './logger.js'
console.log('hello world')

خطا می دهد :
SyntaxError: شناسه ‘log’ قبلاً اعلام شده است
اگر این نوع بیانیه واردات، نهادهای وارد شده به محدوده فعلی، بنابراین خطر تداخل نام وجود دارد.
ما می توانیم از این طریق مقابله کنیم

import {log as log2} from './logger.js'

در اینجا ما نام اصلی را تغییر می دهیم و سپس از آن در ماژول استفاده می کنیم.

به نام صادرات

صادرات نامگذاری شده به شما امکان می دهد چندین مقدار را از یک ماژول صادر کنید. هر مقدار با یک نام خاص صادر می شود و این نام ها باید هنگام وارد کردن استفاده شوند.

export const greeting = "Hello, World!";
export function greet(name) {
    return `${greeting}, ${name}`;
}
export const farewell = "Goodbye!";

صادرات با نام خاص را از ماژول وارد کنید

import { greet, farewell } from './myModule.js';

امتیاز کلیدی

• صادرات چندگانه را می توان تعریف کرد.
• بیانیه های واردات باید از نام دقیق مقادیر صادر شده استفاده کنند.
• صادرات نامگذاری شده را می توان به صورت انتخابی وارد کرد.

صادرات پیش فرض

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

// Define a function
function greet(name) {
    return `Hello, ${name}`;
}

// Export the function as the default export
export default greet;

صادرات پیش فرض را از ماژول وارد کنید

import greet from './myDefaultModule.js';

امتیاز کلیدی:

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

صادرات مختلط

یک ماژول می تواند هم صادرات با نام و هم صادرات پیش فرض داشته باشد.

// Define variables and functions
const greeting = "Hello, World!";
function greet(name) {
    return `${greeting}, ${name}`;
}
const farewell = "Goodbye!";

// Export named and default exports
export { greeting, farewell };
export default greet;

صادرات پیش فرض و صادرات نامگذاری شده را وارد کنید

import greet, { greeting, farewell } from './myCombinedModule.js';

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

ماژول ES و تفاوت مشترک JS

ESM در حالت سخت اجرا می شود

• ماژول ES به طور ضمنی از حالت سخت در حالت سخت استفاده می کند، به این معنی که نیازی به اضافه کردن صریح نداریم "use strict" عبارت در ابتدای هر فایل بنابراین، ما فقط دو گزینه داریم یا حالت سخت یا حالت غیر سخت. اما استفاده از حالت سخت قطعا اجرای ایمن تر است زیرا به توسعه دهنده اجازه نمی دهد از متغیر اعلام نشده استفاده کند.

هنوز چیزهای زیادی برای یادگیری کاربرد “استفاده سخت” وجود دارد که در وبلاگ جداگانه پوشش داده خواهد شد.

فعلا همین! ممنون که تا اینجا خواندید امیدوارم از یادگیری این مطلب لذت برده باشید و برخی از تردیدهای رایج را برطرف کرده باشید.
در نظر به من اطلاع دهید، چه چیزی در این وبلاگ دوست داشتید، هر پیشنهادی پذیرفته می شود.
اگر سوالی دارید در نظرات از من دریغ نکنید، من تمام تلاشم را می کنم تا در حد دانشم پاسخگو باشم ❤️.