کامپایلر 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 های زیر استفاده کنید:
|
1 2 3 4 5 |
<!-- نسخه نهایی --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- نسخه 6--> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> |
حالا وقتی بخواهیم یک اسکریپت بنویسیم، بایستی به صورت زیر عمل کنیم:
|
1 2 3 |
<script type="text/babel"> </script> |
همانطور که می‌بینید، بایسیتی ویژگی type تگ script خود را برابر text/babel قرار دهیم تا توسط babel، تشخیص داده شده و کامپیل شود. به مثال زیر دقت کنید:
|
1 2 3 4 5 6 7 8 9 |
<div id="output"></div> <!-- Load Babel --> <!-- v6 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- Your custom script here --> <script type="text/babel"> const getMessage = () => "Hello World"; document.getElementById('output').innerHTML = getMessage(); </script> |
در توضیحات کتابخانه ReactJS «لینک» نیز با افزودن Babel به صفحه، جهت کامپایل JSX استفاده کرده‌ایم.
ابزارهای آنلاین Babel.js
از ابزارهای آنلاین زیر نیز می‌توانید جهت نوشتن کد و کامپایل آن توسط بابل استفاده کنید:
کانال تلگرام فول کده
نظرات ثبت شده بدون دیدگاه