دليل موجز وبسيط عن بابل

Babel هو إدخال رائع في مجموعة أدوات Web Developer. إنها أداة رائعة ، وهي موجودة منذ بعض الوقت ، ولكن في الوقت الحاضر يعتمد عليها كل مطور جافا سكريبت تقريبًا ، وسيستمر هذا الأمر ، لأن Babel الآن لا غنى عنه وقد حل مشكلة كبيرة للجميع.

تغطي هذه المقالة بابل 7 ، الإصدار المستقر الحالي

مقدمة إلى بابل

بابل هي أداة رائعة ، وهي موجودة منذ بعض الوقت ، ولكن في الوقت الحاضر تقريبًاJavaScriptيعتمد عليه المطور ، وسيستمر ذلك ، لأن Babel الآن لا غنى عنه وقد حل مشكلة كبيرة للجميع.

أي مشكلة؟

المشكلة التي واجهها كل مطور ويب بالتأكيد: ميزة JavaScript متوفرة في أحدث إصدار من المستعرض ، ولكن ليس في الإصدارات القديمة. أو ربما يقوم Chrome أو Firefox بتطبيقه ، لكن Safari iOS و Edge لا يفعلان ذلك.

على سبيل المثال ، قدم ES6 ملفوظيفة السهم:

[1, 2, 3].map((n) => n + 1)

وهو الآن مدعوم من قبل جميع المتصفحات الحديثة. IE11 لا يدعمها ولا يدعمها Opera Mini (كيف أعرف؟ عن طريق التحقق منجدول توافق ES6).

فكيف تتعامل مع هذه المشكلة؟ هل يجب عليك المضي قدمًا وترك هؤلاء العملاء الذين لديهم متصفحات أقدم / غير متوافقة خلفهم ، أم يجب عليك كتابة كود JavaScript أقدم لإرضاء جميع المستخدمين لديك؟

أدخل بابل. بابل هومترجم: يأخذ رمزًا مكتوبًا في معيار واحد ، ويقوم بتحويله إلى رمز مكتوب في معيار آخر.

يمكنك تكوين Babel لتحويل ES2017 JavaScript الحديث إلى بناء جملة JavaScript ES5:

[1, 2, 3].map(function(n) {
  return n + 1
})

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

(إذا كان كل هذاESيبدو الأمر محيرًا لك ، شاهد المزيد عن إصدارات ESفي دليل ECMAScript)

تركيب بابل

يتم تثبيت Babel بسهولة باستخدامnpmمحليًا في المشروع:

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

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

منذ npm يأتي الآن معnpx، يمكن تشغيل حزم CLI المثبتة محليًا عن طريق كتابة الأمر في مجلد المشروع:

لذا يمكننا تشغيل بابل بمجرد الجري

npx babel script.js

مثال على تكوين بابل

Babel out of the box لا يفعل أي شيء مفيد ، تحتاج إلى تكوينه وإضافة ملحقات.

فيما يلي قائمة بملحقات Babel

لحل المشكلة التي تحدثنا عنها في المقدمة (باستخدام وظائف السهم في كل متصفح) ، يمكننا تشغيل

npm install --save-dev \
    @babel/plugin-transform-arrow-functions

لتنزيل الحزمة فيnode_modulesمجلد تطبيقنا ، فنحن بحاجة إلى إضافته

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

الى.babelrcالملف موجود في مجلد جذر التطبيق. إذا لم يكن لديك هذا الملف بالفعل ، فما عليك سوى إنشاء ملف فارغ ووضع هذا المحتوى فيه.

تلميح: إذا لم تشاهد ملفًا نقطيًا (ملف يبدأ بنقطة) فقد يكون هذا غريبًا في البداية لأن هذا الملف قد لا يظهر في مدير الملفات الخاص بك ، لأنه ملف مخفي.

الآن إذا كان لديناscript.jsملف بهذا المحتوى:

var a = () => {};
var a = (b) => b;
const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
console.log(bob.printFriends());

ادارةbabel script.jsسيخرج الكود التالي:

var a = function () {};var a = function (b) {
  return b;
};
const double = [1, 2, 3].map(function (num) {
return num * 2;
});console.log(double); // [2,4,6]

var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
var _this = this;
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_friends</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">f</span>) {
  <span style="color:#66d9ef">return</span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">_name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">" knows "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">f</span>);
});
}
};
console.log(bob.printFriends());

كما ترون ، تم تحويل وظائف الأسهم إلى وظائف JavaScript ES5

المسبقة بابل

لقد رأينا للتو في المقالة السابقة كيف يمكن تكوين Babel لتحويل ميزات JavaScript محددة.

يمكنك إضافة المزيد من المكونات الإضافية ، لكن لا يمكنك إضافة ميزات التكوين واحدة تلو الأخرى ، فهذا ليس عمليًا.

هذا هو سبب عروض Babelالمسبقة.

أشهر الإعدادات المسبقة هيenvوreact.

نصيحة: تم إهمال (وإزالة) بابل 7 من الإعدادات المسبقة السنوية مثلpreset-es2017، والمرحلة المسبقة. يستخدم@babel/preset-envبدلا من.

`env`المعد مسبقا

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

على سبيل المثال ، "دعم الإصدارين الأخيرين من كل متصفح ، ولكن بالنسبة إلى Safari ، دعنا ندعم جميع الإصدارات منذ Safari 7"

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

أو "لست بحاجة إلى دعم المتصفح ، فقط دعني أعمل معهNode.js6.10 "

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

`react`المعد مسبقا

الreactالإعداد المسبق مناسب جدًا عند كتابة تطبيقات React: إضافةpreset-flowوsyntax-jsxوtransform-react-jsxوtransform-react-display-name.

من خلال تضمينه ، تكون جاهزًا تمامًا لتطوير تطبيقات React ، مع تحويلات JSX ودعم Flow.

مزيد من المعلومات حول الإعدادات المسبقة

https://babeljs.io/docs/plugins/

استخدام Babel مع حزمة الويب

إذا كنت تريد تشغيل JavaScript حديثًا في المتصفح ، فإن Babel بمفرده لا يكفي ، فأنت بحاجة أيضًا إلى تجميع الكود. Webpack هي الأداة المثالية لذلك.

تلميح: اقرأ ملفدليل حزمة الويبإذا لم تكن معتادًا على حزمة الويب

تحتاج JS الحديثة إلى مرحلتين مختلفتين: مرحلة الترجمة ومرحلة وقت التشغيل. هذا لأن بعض ميزات ES6 + تحتاج إلى polyfill أو مساعد وقت التشغيل.

لتثبيت وظيفة Babel polyfill runtime ، قم بتشغيل

npm install @babel/polyfill \
            @babel/runtime \
            @babel/plugin-transform-runtime

الآن في ملفwebpack.config.jsإضافة الملف:

entry: [
  'babel-polyfill',
  // your app scripts should be here
],
module: {
loaders: [
// Babel loader compiles ES2015 into ES5 for
    // complete cross-browser support
    {
loader: ‘babel-loader’,
test: /.js$/,
// only include files present in the src subdirectory
      include: [path.resolve(__dirname, “src”)],
// exclude node_modules, equivalent to the above line
      exclude: /node_modules/,
query: {
// Use the default ES2015 preset
        // to include all ES2015 features
        presets: [‘es2015’],
plugins: [‘transform-runtime’]
}
}
]
}

من خلال الاحتفاظ بالإعدادات المسبقة والمعلومات الإضافية داخل ملفwebpack.config.jsملف ، يمكننا تجنب وجود ملف.babelrcملف.