كيفية تضمين ملف JS داخل ملف JS آخر: 5 طرق عملية

«اجمع الكود الخاص بك قطعة قطعة»: لماذا لا يمكنك ببساطة إدراج ملف JS داخل آخر

كل من كتب بلغة JavaScript لأكثر من أسبوعين، عاجلاً أم آجلاً، يصطدم بالحائط: «كيف يمكنني استخدام الدوال من ملف آخر؟ ألا يجب علي نسخها ولصقها ذهاباً وإياباً؟!» موقع Stack Overflow القديم الجيد يعرف ذلك جيداً — السؤال "How do I include a JavaScript file in another JavaScript file?" يحصل على آلاف المشاهدات كل شهر. وهذا منطقي: في المشاريع الحقيقية، يتوسع الكود بسرعة، والاحتفاظ بكل شيء في ملف واحد هو طريق للفوضى.

في هذه المقالة، سنشرح 5 طرق مثبتة لتضمين ملف JS داخل ملف JS آخر. من الطرق القديمة إلى المعايير الحديثة. هيا بنا!

الطريقة 1: الطريقة الكلاسيكية <script> في HTML

أبسط طريقة وأكثرها بدائية — هي ببساطة إضافة عدة وسوم <script> في ملف HTML الخاص بك. لكن هناك فارق بسيط: يتم تحميل الملفات بشكل تسلسلي. إذا كان ملف main.js الخاص بك يعتمد على utils.js، فيجب أن يكون utils.js في الأعلى.

<!DOCTYPE html>\n<html>\n<head>\n    <script src="utils.js"></script>\n    <script src="main.js"></script>\n</head>\n<body>\n    ...\n</body>\n</html>

المشكلة: هذا ليس تضمين ملف JS داخل ملف JS آخر، بل مجرد ترتيب تحميل. إذا كان لديك 20 سكريبت، فإنك تخاطر بالارتباك في التبعيات. بالإضافة إلى ذلك، تصبح جميع المتغيرات والدوال عامة — مرحباً، تضارب الأسماء!

الطريقة 2: وحدات ES6 (المعيار الحديث)

بدءاً من ES6 (ECMAScript 2015)، ظهر نظام وحدات مدمج في JavaScript. هذه أفضل طريقة لتضمين ملف JS داخل ملف JS آخر في المشاريع الحديثة.

التصدير من ملف (math.js)

// math.js\nexport function add(a, b) {\n    return a + b;\n}\n\nexport const PI = 3.14159;\n\nexport default function multiply(a, b) {\n    return a * b;\n}

الاستيراد في ملف آخر (app.js)

// app.js\nimport multiply, { add, PI } from './math.js';\n\nconsole.log(add(2, 3));      // 5\nconsole.log(PI);             // 3.14159\nconsole.log(multiply(4, 5)); // 20

هام: لكي يعمل هذا في المتصفح، يجب إضافة السمة type="module" في HTML:

<script type="module" src="app.js"></script>

هذه الطريقة تحل جميع المشاكل: عزل الكود، تبعيات واضحة، عدم وجود متغيرات عامة. مثالية لتطبيقات الويب الحديثة.

الطريقة 3: Node.js require (CommonJS)

إذا كنت تكتب باستخدام Node.js، فإن المعيار هو CommonJS مع الدالة require(). هذه الطريقة لتضمين ملف JS داخل ملف JS آخر لا تزال مستخدمة في التطوير من جانب الخادم (على الرغم من أن وحدات ES6 قد وصلت إلى هناك أيضاً).

التصدير (utils.js)

// utils.js\nfunction greet(name) {\n    return `مرحباً، ${name}!`;\n}\n\nconst secret = 'myPassword123';\n\nmodule.exports = {\n    greet,\n    secret\n};

الاستيراد (server.js)

// server.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.greet('أليكسي')); // مرحباً، أليكسي!\nconsole.log(utils.secret);          // myPassword123

بسيط، موثوق، يعمل في كل مكان يوجد فيه Node.js. للمتصفحات — لا، فقط من خلال أدوات التجميع (Webpack, Vite).

الطريقة 4: التحميل الديناميكي للبرامج النصية (إنشاء وسم script)

أحياناً تحتاج إلى تضمين ملف JS من ملف JS آخر مباشرة أثناء وقت التنفيذ. على سبيل المثال، عندما تقوم بتحميل أدوات التحليل أو إضافة عند الحاجة فقط. للقيام بذلك، يمكنك إنشاء وسم <script> ديناميكياً.

// loadScript.js\nfunction loadScript(src, callback) {\n    const script = document.createElement('script');\n    script.src = src;\n    script.onload =