عند بدء مشروع ويب جديد حيث سيتم استخدام JavaScript، غالبًا ما يكون أول شيء نفعله هو إعداد أدوات البناء والمطور. على سبيل المثال، Vite، الذي يحظى بشعبية كبيرة هذه الأيام. ربما لا تعلم أن أدوات البناء المعقدة ليست ضرورية لجميع مشاريع JavaScript (الويب). في الواقع، أصبح الآن الاستغناء عنه أسهل من أي وقت مضى كما سأوضح في هذه المقالة.

إنشاء مشروع جديد باستخدام ملف Index.html.

  
  
  
    
Hello world
  

إذا كنت تستخدم VS Code، فقم بتثبيت ملحق Live Preview. شغلها. هذا هو خادم ملفات بسيط مع إعادة التحميل المباشر. يمكنك استخدام أي خادم ملفات، وتأتي Python مع خادم مدمج:

python3 -m http.server

أحب المعاينة المباشرة، لأنها تعمل على تحديث الصفحة تلقائيًا بعد إجراء تغييرات على الملف.

من المفترض الآن أن تكون قادرًا على الوصول إلى ملف Index.html من المتصفح والاطلاع على "Hello World".

بعد ذلك، قم بإنشاء ملف Index.js:

console.log("Hello world");

export {};

قم بتضمينه في ملف Index.html الخاص بك:

افتح وحدة تحكم المطور في متصفحك. إذا رأيت "Hello World"، فأنت تعلم أنه يتم تحميله بشكل صحيح.

تدعم المتصفحات وحدات ECMAScript الآن. يمكنك استيراد ملفات أخرى لآثارها الجانبية:

import "./some-other-script.js";

أو لصادراتها

import { add, multiply } "./my-math-lib.js";

رائع أليس كذلك؟ ارجع إلى دليل MDN أعلاه لمزيد من المعلومات.

الحزم

ربما لا ترغب في إعادة اختراع العجلة، لذلك من المحتمل أن يستخدم مشروعك بعض حزم الطرف الثالث. هذا لا يعني أنك بحاجة الآن إلى البدء في استخدام مدير الحزم.

لنفترض أننا نريد استخدام البنية الفوقية للتحقق من صحة البيانات. لا يمكننا فقط تحميل الوحدات من خادم الملفات (المحلي) الخاص بنا، ولكن من أي عنوان URL. يوفر esm.sh وحدات نمطية لجميع الحزم المتوفرة تقريبًا على npm.

عند زيارتك https://esm.sh/superstruct، يمكنك أن ترى أنه تمت إعادة توجيهك إلى الإصدار الأحدث. يمكنك تضمين هذه الحزمة كما يلي في التعليمات البرمجية الخاصة بك:

import { assert } from "https://esm.sh/superstruct";

إذا كنت تريد أن تكون في الجانب الآمن، يمكنك تثبيت الإصدارات.

أنواع

لا أعرف عنك، لكن الآلة الكاتبة أفسدتني (وجعلتني كسولًا). إن كتابة JavaScript عادي دون مساعدة من مدقق الكتابة يبدو وكأنك تكتب على حبل مشدود. ولحسن الحظ، ليس علينا أن نتخلى عن التحقق من النوع أيضًا.

لقد حان الوقت لخرق npm (على الرغم من أننا لن نقوم بشحن أي رمز يقدمه).

npm init --yes
npm install typescript

يمكنك استخدام مترجم TypeScript على كود JavaScript على ما يرام! هناك دعم من الدرجة الأولى لذلك. قم بإنشاء jsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "checkJs": true,
    "allowJs": true,
    "noImplicitAny": true,
    "lib": ["ES2022", "DOM"],
    "module": "ES2022",
    "target": "ES2022"
  },
  "include": ["**/*.js"],
  "exclude": ["node_modules"]
}

التشغيل الآن

npm run tsc --watch -p jsconfig.json

وارتكب خطأ في الكود الخاص بك. يجب أن يشكو مترجم TypeScript:

/** @type {number} **/
const num = "hello";

بالمناسبة، التعليق الذي تراه أعلاه هو JSDoc. يمكنك إضافة تعليقات توضيحية إلى JavaScript باستخدام الأنواع بهذه الطريقة. على الرغم من أنه أكثر تفصيلاً قليلاً من استخدام TypeScript، إلا أنك تعتاد عليه بسرعة كبيرة. كما أنها قوية جدًا، طالما أنك لا تكتب أنواعًا مجنونة (وهو ما لا ينبغي أن تفعله في معظم المشاريع) فيجب أن تكون على ما يرام.

إذا كنت بحاجة إلى نوع معقد (مساعد)، فيمكنك دائمًا إضافة بعض أنواع TypeScript في ملف .d.ts.

هل JSDoc مجرد نقطة انطلاق للأشخاص العالقين في مشاريع JavaScript الكبيرة حتى يتمكنوا من الانتقال تدريجيًا إلى TypeScript؟ أنا لا أعتقد ذلك! ويواصل فريق TypeScript أيضًا إضافة ميزات رائعة إلى JSDoc TypeScript، كما هو الحال في إصدار TypeScript القادم. يعمل الإكمال التلقائي أيضًا بشكل رائع في VS Code.

استيراد الخرائط

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

يمكننا إضافة خريطة استيراد إلى القسم الرئيسي في ملف Index.html:

الآن يمكننا ببساطة استيراد هذه الحزمة مع

import {} from "superstruct"

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

npm install --save-dev superstruct

لاحظ أن الإصدار الموجود في دليلNode_modules الخاص بك لن يتم استخدامه . يمكنك إزالته، وسيستمر تشغيل مشروعك.

الخدعة التي أحب استخدامها هي إضافة:

      "cdn/": "https://esm.sh/",

إلى خريطة الاستيراد الخاصة بي. ومن ثم يمكن استخدام أي مشروع متاح من خلال esm.sh بمجرد استيراده. على سبيل المثال:

import Peer from "cdn/peerjs";

إذا كنت تريد سحب الأنواع من وحدات العقدة للتطوير لهذا النوع من الاستيراد أيضًا، فأنت بحاجة إلى إضافة ما يلي إلى خيارات المترجم الخاصة بـ jsconfig.json:

    "paths": {
      "cdn/*": ["./node_modules/*", "./node_modules/@types/*"]
    },

تعيين

لنشر مشروعك، انسخ جميع الملفات إلى مضيف ملف ثابت وبذلك تكون قد انتهيت! إذا كنت قد عملت في أي وقت مضى على مشروع JavaScript قديم، فأنت تعلم مدى صعوبة تحديث أدوات البناء التي لم يمر عليها حتى عام أو عامين. لن تعاني من نفس المصير مع إعداد المشروع هذا.

اختبارات

إذا كان JavaScript الخاص بك لا يعتمد على واجهات برمجة تطبيقات المتصفح، فيمكنك فقط استخدام مشغل الاختبار الذي يأتي مرفقًا مع Node.js. ولكن لماذا لا تكتب برنامج الاختبار الخاص بك والذي يعمل مباشرة في المتصفح؟

/** @type {[string, () => Promise | void][]} */
const tests = [];

/**
 *
 * @param {string} description
 * @param {() => Promise | void} testFunc
 */
export async function test(description, testFunc) {
  tests.push([description, testFunc]);
}

export async function runAllTests() {
  const main = document.querySelector("main");
  if (!(main instanceof HTMLElement)) throw new Error();
  main.innerHTML = "";

  for (const [description, testFunc] of tests) {
    const newSpan = document.createElement("p");

    try {
      await testFunc();
      newSpan.textContent = `✅ ${description}`;
    } catch (err) {
      const errorMessage =
        err instanceof Error && err.message ? ` - ${err.message}` : "";
      newSpan.textContent = `❌ ${description}${errorMessage}`;
    }
    main.appendChild(newSpan);
  }
}

/**
 * @param {any} val
 */
export function assert(val, message = "") {
  if (!val) throw new Error(message);
}

الآن قم بإنشاء ملف example.test.js.

import { test, assert } from "@/test.js";

test("1 1", () => {
  assert(1   1 === 2);
});

والملف الذي تستورد فيه جميع اختباراتك:

import "./example.test.js";

console.log("This should only show up when running tests");

قم بتشغيل هذا عند تحميل الصفحة:

await import("@/test/index.js"); // file that imports all tests
(await import("@/test.js")).runAllTests();

وحصلت على إعداد TDD مثالي. لتشغيل قسم فقط من الاختبارات، يمكنك التعليق على بعض عمليات استيراد .test.js، ولكن يجب أن تبدأ سرعة تنفيذ الاختبار في أن تصبح مشكلة فقط عندما يكون لديك الكثير من الاختبارات المتراكمة.

فوائد

لماذا ستفعل هذا؟ حسنًا، استخدام طبقات أقل من التجريد يجعل مشروعك أسهل في تصحيح الأخطاء. هناك أيضًا عقيدة "استخدام المنصة". المهارات التي تتعلمها ستنتقل بشكل أفضل إلى مشاريع أخرى. ميزة أخرى هي أنه عندما تعود إلى مشروع تم بناؤه مثل هذا خلال 10 سنوات، فإنه سيظل يعمل ولن تحتاج إلى القيام بعلم الآثار لمحاولة إحياء أداة البناء التي توقفت عن العمل لمدة 8 سنوات. تجربة سيكون على دراية بها العديد من مطوري الويب الذين عملوا في المشاريع القديمة.

راجع plainvanillaweb.com لمزيد من الأفكار.