كيفية استخدام أحدث ميزات JavaScript في أي متصفح

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



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

Polyfilling مقابل. ترشيح

تعمل كلتا الطريقتين لنفس الغرض: يمكننا كتابة رمز يستخدم ميزات جديدة لم يتم تنفيذها في بيئتنا المستهدفة ، ثم تطبيق إحدى هذه الطرق. تعد



polyfill جزءًا من التعليمات البرمجية التي تنفذ ميزات حديثة بحيث يمكن تطبيقها للعمل في الإصدارات القديمة من المتصفح.



التحويل عبارة عن مزيج من كلمتين: التحويل - التحويل

والتجميع - التجميع. في بعض الأحيان ، لا يمكن تنفيذ بناء جملة جديد باستخدام polyfill ، وفي هذه الحالة نستخدم transpiler.



لنتخيل أننا نستخدم متصفحًا قديمًا لا يدعم وظيفة Number.isNaNقدم في مواصفات ES6. لاستخدام هذه الميزة ، نحتاج إلى إنشاء polyfill لهذه الطريقة ، لكننا نحتاج إليها فقط إذا لم تكن متوفرة بالفعل في المتصفح.



للقيام بذلك ، سننشئ وظيفة تحاكي سلوك وظيفة isNaN ونضيفها إلى خاصية Number للنموذج الأولي.

//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));

سنقوم الآن بتحويل رمز الوظيفة التي تم إنشاؤها حديثًا. دعنا نتخيل أن معظم المتصفحات لا تستطيع أداء هذه الوظيفة ، وفي هذه الحالة لا يمكننا إنشاء polyfill لمحاكاة السلوك. نريد تشغيل الكود التالي في Internet Explorer 11 ، لذلك سنقوم بتحويله باستخدام مترجم:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

تم نقل الكود الناتج باستخدام مترجم Babel عبر الإنترنت ، ويمكننا الآن تنفيذه في Internet Explorer 11:

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick

يعد Babel أحد أكثر ترانسبليرات جافا سكريبت شيوعًا. Babel هي أداة تم إنشاؤها للمساعدة في نقل التعليمات البرمجية الخاصة بك بين إصدارات مختلفة من JavaScript ويمكن تثبيتها من خلال Node Package Manager (npm).



أصبح Babel هو المعيار لتجميع تطبيقات ECMAScript في إصدار من ECMAScript يعمل في المتصفحات التي لا تدعم مثل هذه التطبيقات. يستطيع Babel تجميع إصدارات أخرى من ECMAScript مثل React JSX.



في الخطوات التالية ، سنرى كيفية استخدام Babel لنقل وتنفيذ فئة mySuperMethod السابقة على جهاز Linux مع تثبيت Node.js القديم . في أنظمة التشغيل الأخرى ، مثل Windows 10 أو macOS ، الخطوات متشابهة.



ملحوظة. يجب أن يكون لديك Node.js مثبتًا على جهاز الكمبيوتر الخاص بك . تمت إضافة Npm كدالة إلى برنامج التثبيت Node.js



1. افتح موجه الأوامر وأنشئ دليلًا يسمى babelExample:

/mkdir babelExample
/cd babelExample

2. إنشاء مشروع npm وترك الإعدادات الافتراضية. سيقوم الأمر التالي بإنشاء ملف باسم package.json:

npm init

لقطة شاشة لمحتويات ملف package.json بعد تنفيذ الأمر npm init



هنا index.js (قد يكون اسم الملف مختلفًا) هو نقطة الدخول إلى تطبيقنا. هذا هو المكان الذي سنضع فيه كود جافا سكريبت الخاص بنا ، لذا أنشئ ملف index.js وأدخل الكود التالي فيه:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

3. بينما يمكننا تثبيت Babel CLI عالميًا ، فمن الأفضل القيام بذلك محليًا ، مشروعًا بمشروع. سيضيف الأمر التالي دليل node_modules ويعدل ملف package.json لإضافة تبعيات Babel:

npm install -save-dev @babel/core @babel/cli

لقطة شاشة لـ package.json مع تبعيات بابل



4. أضف ملف التكوين .babelrc إلى جذر المشروع وقم بتضمين الإضافات للتحولات ES2015 +.



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



قم بتعيين إعداد مسبق لجميع ميزات ES6 (يحتوي على مجموعة من المكونات الإضافية):

npm install @babel/preset-env --save-dev

لقطة شاشة من package.json مع تبعية babel preset-env ،



تحرير ملف .babelrc وإضافة التكوين الذي يتضمن تحويلات لـ ES6.



اكتب الكود التالي إلى ملف .babelrc الخاص بك:

{
  "presets": ["@babel/preset-env"]
}

5.



ملاحظة الاستخدام . إذا كنت تستخدم Windows 10 PowerShell ، فاحرص على ترميز ملفاتك حيث يمكنك الحصول على أخطاء في التحليل عند بدء تشغيل Babel. من المستحسن أن تكون الملفات بترميز UTF-8.



input: index.js

output: out folder (Babel سيترك الملفات التي تم ترحيلها هنا)



مباشرة عن طريق تشغيل الأمر التالي في وحدة التحكم:

./node_modules/.bin/babel index.js -d out

باستخدام برنامج نصي npm ، قم بإضافة السطر التالي إلى ملف package.json الخاص بك:

"build": "babel index.js -d out"

لقطة شاشة لمحتويات ملف package.json بعد إضافة build script قم



بتشغيل الأمر التالي:

npm run build

في كلتا الحالتين ، تحصل في المجلد الخارج على ملف (أو ملفات) تم تحويلها إلى مستعرض جاهز للاستخدام لا يدعم بنية فئة ES6 ، الرمز هو:

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());

خاتمة

تتغير لغة JavaScript باستمرار ، وبفضل هذه الأدوات ، يمكننا كتابة تعليمات برمجية ببنية جديدة وميزات جديدة لم يتم تنفيذها بعد في جميع إصدارات المتصفحات.



آمل أن يحظى هذا المقال بإعجابكم. لقد قمت ببث هذا والعديد من المقالات المفيدة الأخرى لمطوري Frontend المبتدئين على قناة Frontend.school () Telegram ، حيث أقوم أيضًا بإعداد اختبارات مفيدة لاختبار معرفتي. ألفت انتباهكم إلى حقيقة أن القناة مجرد هواية ورغبة في المساعدة ولا تجلب لي فوائد مادية.