كيفية إعداد بيئة ES6 الخاصة بك بسرعة

كما تعلم ، بدأت المتصفحات في اللحاق بـ ES6. ومع ذلك ، لا يعمل كل شيء بسلاسة كما هو متوقع ، وقد تكون هذه مشكلة تستغرق وقتًا طويلاً ومملة لحلها. إذا حدث خطأ ما ، فإن محاولة تحديد ما إذا كانت المشكلة تكمن في الشفرة أو المتصفح ليست عملية سهلة.

لكن لا تقلق ، سأوضح لك كيف يمكنك تثبيت وكتابة كود ES6 بسرعة ، والأهم من ذلك ، جعله متوافقًا مع جميع المتصفحات التي تدعم ES5.

ES5 إلى ES6

من أجل كتابة كود ES6 ، نحتاج إلى تثبيت شيء يمكنه تجميعه إلى ES5. سوف نستخدم Rollup. يقوم بتجميع أجزاء صغيرة من التعليمات البرمجية إلى شيء أكبر وأكثر تعقيدًا ، مثل مكتبة أو تطبيق. يتيح لك ذلك استخدام OOP (البرمجة الموجهة للكائنات) مما يجعل الكود الخاص بك يبدو أنظف ومنظمًا ووحدات معيارية ، إلى جانب وظائف أخرى مفيدة. لتوضيح، JS هي وجوه المنحى، ولكن ليس على أساس طبقي لغة وجوه المنحى مثل جافا، C ++، C #، وما إلى ذلك، حتى يتم الإفراج عن ES6.

بخلاف ذلك ، فإن أقرب ما يمكنك الوصول إليه من OOP فيما يتعلق بتضمين الفئات مع ES5 هو استخدام IIFE (استدعاء التعبير الوظيفي فورًا) ، أو تثبيت مكتبات خارجية. ولكن لماذا تعتمد على الموارد الخارجية عندما يكون لديك لغة أساسية تدعم نموذج OOP؟ تدعمها بالفعل العديد من لغات البرمجة الأكثر استخدامًا (مثل C ++ و Java و C # و PHP).

لماذا ES6؟

أنا شخصياً أستخدمه لأنه يسمح لي بتنظيم الكود الخاص بي في ملفات منفصلة ، مما يجعل من السهل قياس الشفرة والحفاظ عليها.

على سبيل المثال، في بلدي HTML، وأنا واحد scriptأن الأحمال main.js، وداخل main.js، I تحميل متعددة JSالملفات باستخدام importو exportالبيانات. بدلاً من وجود نصوص متعددة في ملف HTML الخاص بي ، فأنا بحاجة إلى واحد فقط (رمز أقل).

المتطلبات الأساسية

• Linux أو macOS (يعتمد على Debian)
• تم تثبيت NPM (مدير الحزم)
• المعرفة الأساسية CLI

الخطوة الأولى: تثبيت Rollup

من أجل الاستخدام Rollupيجب علينا تثبيته عالميًا. تذكر أن تستخدم sudo. يتيح لك ذلك الوصول إلى Rollupالأوامر في أي مشروع تعمل معه.

الخطوة الثانية: بنية الملف

بعد تثبيت Rollupعلى الصعيد العالمي، فإن الخطوة التالية هي لإعداد ما يصل بنية المجلد وإنشاء مجلدين srcو destداخل المشروع. بالإضافة إلى ذلك ، قم بإنشاء ملفات index.html.

• src → ملفات ES6 (حيث ستكتب الرمز)
• dest → يولد ES5 (إصدارات مجمعة من ES6)

ضع في اعتبارك أن bundle.jsالملف يتم إنشاؤه تلقائيًا عند تنفيذ Rollupالأمر. سنتحدث عن هذا لاحقا.

الخطوة الثالثة: إنشاء ملف التكوين

قم بإنشاء ملف جديد وقم بتسميته rollup.config.js. ثم أضف هذا الرمز:

تأكد من أن inputو outputمسار المصدر هو الصحيح مع بنية المجلد الخاص بك، والتي يتم وضع هذا الملف في المجلد الرئيسي.

الخطوة الرابعة: تحميل ملف البرنامج النصي بتنسيق HTML

نحن جاهزون تقريبًا ، لكن نحتاج أولاً إلى الارتباط بالملف المصدر الصحيح في نموذج HTML الخاص بنا. سيؤدي هذا إلى تحميل ملف ES5 الذي تم تجميعه من ES6.

الخطوة الخامسة: إعداد ملفات JS

من أجل التحقق من Rollupعمل الأمر ، نحتاج إلى إعداد بنية OOP بسيطة. سوف نقوم بإنشاء car.jsفئة، و default exportذلك ل main.js.

ضع في اعتبارك أن هذا الملف يُصدر مثيلًا جديدًا car.jsللفئة ، وهذا يسمح بالوصول إلى الطرق مباشرةً بدلاً من الكتابة const car = new Car()في main.jsالفصل.

نظرًا لأنني مهندس برمجيات كسول ، فإن التعامل مع بضعة أحرف إضافية من التعليمات البرمجية يستغرق وقتًا طويلاً :)

بعد ذلك ، قم باستيراد car.jsالفئة main.jsإلى للوصول إلى الأسلوب type().

الخطوة السادسة: تجميع ES6 إلى ES5

لتنفيذ ملف التكوين الذي أنشأناه ، قم بتشغيل هذا الأمر $ rollup -cأو $ rollup --config- كلاهما متماثل.

بعد تشغيل أحد الأوامر ، افتح من index.htmlخلال متصفح ، ثم افتح فحص ( ctrl + shift + I) في المتصفح ، وانتقل إلى console. إذا رأيت النص "Tesla Model S"، فهذا يعني أن كل شيء يعمل بنجاح.

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

اختياري

نظرًا لأنك قمت بالتثبيت Rollupعالميًا ، يمكنك ترجمة ES6 دون الحاجة إلى امتلاك الملف rollup.config.js. يفعل نفس الشيء بالضبط:

$ rollup src/main.js — o dest/bundle.js — f iife

أنا شخصياً أوصي بالتشغيل $ rollup -cكما هو موضح في الخطوة السادسة نظرًا لوجود رمز أقل مطلوب. تذكر أنه يجب أن يكون الملف rollup.config.js مضمنًا عند تشغيل هذا الأمر.

إذا وجدت أن إعداد نهج التثبيت القصير هذا لـ ES6 مفيد ، فيرجى التعليق والتصفيق. إنها كارما جيدة.