كيفية تحويل ES6 إلى ES5 باستخدام بابل

اجعل متصفح ES6 code 100٪ مدعومًا

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

بابل هو جهاز ترجمة (يترجم الشفرة بلغة إلى لغة كمبيوتر أخرى بنفس مستوى التجريد) يمكنه تحويل كود ES6 الخاص بنا إلى ES5. سأفترض أنك تعرف كيفية استخدام العقدة و npm وتثبيتها على جهازك. إذا لم تقم بذلك ، فابدأ هنا.

1. تثبيت بابل كما ديف التبعية

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

$ npm install -D babel-cli

2. اكتب كود ES6

إذا كان لديك بالفعل رمز ES6 مكتوب ، فأنت في مقدمة اللعبة. إذا لم تقم بذلك ، فقم بذلك الآن. سيكون اقتراحي هو تضمين ملفات JavaScript في مجلد ، مثل src أو javascript. سأقوم بإنشاء ملف مثال:

// src / example.js
الصف مرحبا {
  العالم الثابت () {
    console.log ('Hello، World!')؛
  }
}
مرحبا بالعالم()؛

3. تثبيت الإعداد المسبق env وإنشاء ملف .babelrc

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

في حالتنا ، سنستخدم env مسبقًا ونثبته على أنه تبعية dev في مشروعك.

$ npm install -D babel-preset-env

الآن نحتاج ملف .babelrc لدينا. يشبه إلى حد كبير كيف تعتمد npm على package.json ، يستخدم Babel .babelrc لتتبع المكونات الإضافية والإعدادات المسبقة التي سنستخدمها.

قم بإنشاء ملف .babelrc الخاص بك:

$ اللمس

واكتب ما يلي:

// .babelrc
{
  "إعدادات مسبقة": ["env"]
}

4. إنشاء أمر بناء npm

لست بحاجة إلى القيام بذلك ، لكن ذلك سيجعل الأمر أسرع وأكثر بساطة إذا كنت بحاجة إلى نقل الشفرة غالبًا.

انتقل إلى ملف package.json الخاص بك حيث سننشئ برنامج نصي لإنشاء npm باستخدام أمر babel. يأخذ الأمر babel وسيطين: المسار إلى رمز ES6 الخاص بك والمسار إلى المكان الذي تريد أن يذهب إليه رمز ES5.

إذا كان لديك كل شفرة جافا سكريبت JavaScript الموجودة لديك في دليل ، فيمكنك إضافة علامة -d إلى الأمر لإخبار Babel بالبحث عن الأدلة بدلاً من الملفات. على سبيل المثال ، لديّ شفرة JavaScript في دليل src الخاص بي ولكن أريد وضع كود ES5 في دليل بناء.

// package.json
...
"البرامج النصية": {
  "build": "babel src -d build" ،
}،
...

5. قم بتشغيل الأمر بابل

مع إنشاء ملف .babelrc الخاص بك وإعداد أمر الإنشاء ، ما عليك سوى تشغيله في سطر الأوامر.

بناء npm $ بناء

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