تبلیغات
تبلیغات

کامپایلر Babel جاوا اسکریپت + روش استفاده در مرورگر

کامپایلر Babel جاوا اسکریپت
استفاده از نسل جدید جاوا اسکریپت، با کامپایلر Babel


Babel یا Babel.js (بیبل/بابل)، Babel ابزاری است که به شما کمک می‌کند تا به کدنویسی در آخرین ورژن از جاوا اسکریپت بپردازید. وقتی که محیط شما از ویژگی‌های خاص بومی (Native) پشتیبانی نکند، Babel به شما کمک خواهد کرد تا این ویژگی‌ها را نیز در جاوا اسکریپت کامپایل کنید.

Babel عمدتا برای تبدیل کد ECMAScript 2015+، به یک نسخه‌ی سازگار از جاوا اسکریپت در مرورگرهای فعلی/قدیمی و محیط‌‌های دیگر استفاده می‌شود.

  • Transform syntax
  • ویژگی‌های Polyfill
  • Source code transformations (codemods)
  • و …

  • ES2015 و بالاتر: Babel، از طریق syntax transformers (تبدیل‌کننده‌های سینتکس)، از آخرین نسخه‌ی جاوا اسکریپت پشتیبانی می‌کند. لذا این قابلیت به شما اجازه می‌‌دهد تا از سینتکس جدید جاوا اسکریپت استفاده کنید، در حالی که برای پشتیبانی مرورگر از قابلیت‌های جدید منتظر نمیمانید.
  • JSX و React: کتابخانه Babel،  همچنین می‌تواند سینتکس JSX را نیز تبدیل کند؛ که در React نیز مورد استفاده قرار می‌گیرد.
  • Type Annotations (Flow and TypeScript)
  • Pluggable
  • Debuggable
  • Spec Compliant
  • Compact

شروع به کار

روش‌های استفاده از Babel در محیط‌های مختلف را می‌توانید دز «این‌لینک» از سایت رسمی آن مشاهده کنید؛ اما در اینجا، به روش استفاده از آن در مرورگر می‌پردازیم.


استفاده از بابل در مرورگر:

برای اضافه کردن بابل به صفحه خود، می‌توانید از CDN های زیر استفاده کنید:

حالا وقتی بخواهیم یک اسکریپت بنویسیم، بایستی به صورت زیر عمل کنیم:

همانطور که می‌بینید، بایسیتی ویژگی type تگ script خود را برابر text/babel قرار دهیم تا توسط babel، تشخیص داده شده و کامپیل شود. به مثال زیر دقت کنید:


در توضیحات کتابخانه ReactJS «لینک» نیز با افزودن Babel به صفحه، جهت کامپایل JSX استفاده کرده‌ایم.

ابزارهای آنلاین Babel.js

از ابزارهای آنلاین زیر نیز می‌توانید جهت نوشتن کد و کامپایل آن توسط بابل استفاده کنید:

صفحات رسمی Babel.js

وبسایت رسمی مستندات کامل گیت‌هاب
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک‌گذاری اطلاعات در هر زمینه‌ای
برنامه‌نویس فول استک

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه