استيراد ES6 مع المعلمات

معلمات استيراد ES6

لقد سألت نفسي مؤخرًا عما إذا كان من الممكن بالفعل استخدام عبارات استيراد نظام ES6 في Javascript ليس فقط بالطريقة الشائعة (استيراد وحدة محلية فقط عبر مسار نسبي أو اسم الحزمة) ، ولكن باستخدام معلمات.

ستكون حالة الاستخدام الخاصة بي شيئًا من هذا القبيل: قم بتوفير نوع من المعلمات أثناء الاستيراد بحيث يمكن للوحدة المستوردة نفسها معاملة هذه المعلمات كعلامة للاستيراد الشرطي أو معالجة التعليمات البرمجية الخاصة.

كما اتضح ، هذا ممكن تمامًا!

عمليات استيراد ES6 هي مجرد عناوين URL

قبل أن نلقي نظرة على الشفرة ، من المهم أن نتذكر أن عبارات الاستيراد في Node.js هي عمليًا مجرد عناوين URL. يستخدم Node.js افتراضيًا خوارزمية لتحديد كيف تبدو عناوين URL بالفعل عند حلها بالكامل. على سبيل المثال ، إذا قمت بتوفير المسار النسبي فقط كمحدد استيراد ، فإن Node.js لا يزال يحل السلسلة إلى عنوان URL مطلق للاستيراد خلف الكواليس.

استخدام معامِلات استعلام URL للاستيراد

ونظرًا لأن الاستيراد ينتقل إلى عنوان URL ، يمكننا استخدام معلمات بحث URL الشائعة بالإضافة إلى أجزاء عنوان URL في عمليات الاستيراد.

أولاً ، تأكد من دعم وحدات ES6 لاختبار هذه الميزة. يتطلب هذا تغييرًا بسيطًا في package.json ، حيث يجب ضبط حقل "type" على "module". لاحظ أنه يجب عليك استخدام Node.js الإصدار 12 أو أعلى.

{
  "name": "es6-import-params",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

بعد ذلك ، حدد وحدتين صغيرتين لعرض بسيط.

//
// index.js
//

import {greet} from "./lib.js?name=Tom";

// This will print "Hello Tom".
greet();

//
// lib.js
//

// We're using Node's native 'URL'-module
// to transform the provided string into
// a usable representation.
//
// Note that 'import' here isn't part of
// an acutal import, but rather resolved
// to a global variable.
const url = new URL(import.meta.url);

// A simple greeter for demo purposes.
// We just access the map 'searchParams'
// from our usable 'url'-object and use
// a fallback if no params are provided.
export function greet() {
  console.log(`Hello ${url.searchParams.get("name") || "World"}`);
}

عمليات استيراد متعددة بمعلمات مختلفة

كما هو مكتوب في وثائق Node.js ، يتم تخزين كل استيراد مؤقتًا في وقت التشغيل لعمليات الاستيراد اللاحقة بشكل أسرع في الوحدات النمطية الأخرى. لذلك من المهم معرفة أن الواردات من نفس الوحدة ولكن بمعلمات مختلفة يتم تخزين كل منها مؤقتًا على حدة. بالطبع يستورد بتوقيع مطابق ثم لا يزال يتم قراءته من ذاكرة التخزين المؤقت.

// 
// index.js
//

// A small adaptation for the index.js
// file, this time importing the same 
// module twice w/ different params. Each
// module gets cached twice, too.
import * as tomLib from "./lib.js?name=Tom";
import * as lukeLib from "./lib.js?name=Luke";

// 'Hello Tom'.
tomLib.greet();
// 'Hello Luke'.
lukeLib.greet();

// Still 'Hello Tom', as it's
// its own module.
tomLib.greet();

استخدم حالات

الأمثلة في هذه المقالة قصيرة جدًا عن قصد ، لكنك فهمت الفكرة. اعتمادًا على متطلباتك ، يمكن أن يكون استخدام معلمات الاستعلام مع عمليات الاستيراد خيارًا رائعًا تمامًا لإعداد المتغيرات "العامة" لكل وحدة نمطية. هذا يلغي الحاجة إلى مقدمي الخدمات والمحددون لتحقيق نفس الهدف.