بابیل 7 کے ساتھ شروع کریں

ماحولیاتی نظام کی چوڑائی کی وجہ سے جاوا اسکرپٹ منفرد ہے. جبکہ نئے معیارات مصنوعی چینی شامل کرتے ہیں، انہیں براؤزرز پر معاونت حاصل کرنے میں وقت لگتا ہے. خود کار طریقے سے ٹرانسمیشن کے ذریعہ بابیل اس مسئلے کے ارد گرد کام کرتا ہے.

مصنوعات کے پیچھے خیال آسان ہے: بابیل ES6 یا ES7 کوڈ میں لیتا ہے اور Emulation کوڈ کے ساتھ نئے مطابقت پذیر عناصر کو تبدیل کرتا ہے. اس کی پیداوار کلاسیکی جاوا اسکرپٹ نحوط کی تصدیق کرتا ہے اور انٹرنیٹ ایکسپلورر جیسے پرانے براؤزرز پر چلتا ہے.

بابیل کی ابتدائی رہائی نے طوفان کی طرف سے دنیا کو لے لیا. جلد ہی اس کے بعد جلد ہی ظاہر ہوا، ردعمل کی طرح مختلف فریم ورک، ویو اور امبر نے اسے قبول کیا. ڈویلپرز اکثر مصنوعات کا استعمال کرتے ہیں بغیر اس کے بغیر یہ پس منظر میں کام کرتا ہے - ایک سے زیادہ مقبول این پی ایم کے منصوبے سے زیادہ بچے پر ایک انحصار ہے.

• اے پی پی کیسے بنانا

ان انحصار نے ایک تنازعے سے بچنے والے معاملہ میں پیشگی کی رہائی کے عمل کو تبدیل کر دیا. ورژن 7، اب بھی ایک چھوٹا سا برقرار رکھنے والے ٹیم کی طرف سے منظم کیا گیا ہے، اس طرح ممکن ہو سکے کے طور پر ہم آہنگ ہونے کی کوشش کی. توڑنے والی تبدیلییں کم اور دور ہیں، جبکہ کوڈ جنریشن کی کیفیت زیادہ ہے (اگر آپ کسی ٹیم کے ساتھ کام کر رہے ہیں تو، دستاویزات کو بچانے کے کلاؤڈ اسٹوریج آپ کو ہم آہنگی رہنے میں مدد ملے گی).

اگر آپ نے پہلے سے پہلے بچے کے ساتھ کام نہیں کیا ہے، تو یہ آپ کا گائیڈ بنیں. اعلی درجے کی جاوا اسکرپٹ کی خصوصیات کو استعمال کرنے کے قابل ہونے کے بغیر مطابقت کے خدشات زندگی کو بہت آسان بنا دیتا ہے.

کیا آپ اپنے عمل کو بہتر بنانے کے لئے کچھ اوزار پسند کریں گے؟ سب سے بہترین کے لئے ہمارے گائیڈ ویب سائٹ بلڈر مدد کریں گے. طویل مدتی سپورٹ چاہتے ہیں؟ حق حاصل کرو ویب میزبانی سروس.

01. ورژن چیک

عام طور پر نوڈ رن ٹائم ماحول میں رہتا ہے. استعمال ہونے والے ورژن کی جانچ پڑتال کرکے چلتے ہیں. آؤٹ پٹ Ubuntu 14.04 ورکشاپ پر پایا ورژن ریاست فراہم کرتا ہے جو مندرجہ ذیل مضمون کو تخلیق کرنے کے لئے استعمال کیا جاتا ہے. یہ پیڈنٹری نہیں ہے - اس مرحلے کے ساتھ اعداد و شمار سے پتہ چلتا ہے کہ بابیل ٹیم نے چند نوڈ.جی ورژن کے لئے حمایت کی.

 Tamhan @ Tamhan-ThinkPad: ~ $ نوڈ - ویژن
v8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ NPM - ویژن
6.4.1 

02. پیکیج کے ناموں کی تبدیلی

ورژن 7 میں ایک توڑنے والی تبدیلی میں بابل پیکجوں کو اپنے نام کی جگہ میں منتقل کرنے میں ملوث ہے. پرانے پیکجوں کو مختلف ذخیرہوں سے ہٹا دیا گیا تھا. یہ ضروری ہے، جیسا کہ میراث پیکیج کے نام کا استعمال اس مرحلے کے ساتھ اعداد و شمار میں دکھایا گیا صورت حال میں ہوتا ہے.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
انسٹال کریں - Save-DEV @ Babel / CORE @ Babel / Cli @
Babel / preset-Env @ Babel / Node.
. . .
+ @ Babel / کور @ 7.2.0.
+ @ Babel / نوڈ @ 7.2.0.
+ babel / cli @ 7.2.0.
+ babel / preset-env @ 7.2.0 

03. ایک تعمیر کی کارروائی شامل کریں

مندرجہ بالا مرحلہ فرض کرتا ہے کہ آپ این پی ایم پروجیکٹ کے اندر کام کرتے ہیں. اس صورت میں، تعمیراتی کارروائی کے ذریعے بابل چل رہا ہے آسان ہے. کھولیں پیکیج. json. اور ذیل میں کوڈ میں مظاہرہ کے طور پر اس میں ترمیم کریں:

 {
. . .
"مین": "index.js"،
"سکرپٹ": {
"ٹیسٹ": "گونج \" خرابی: کوئی ٹیسٹ نہیں
مخصوص \ "& amp؛ & amp؛ باہر نکلیں 1"
"تعمیر": "بابیل index.js -d lib"

}، 

04. ہاتھ سے ٹرانسمیشن کوڈ

کام کرنے کے لئے بچے کو ڈالنے میں تعمیر کی کارروائی سے فائرنگ میں شامل ہے. یہ این پی ایم رن کمانڈ کے ذریعہ یہ سب سے بہتر ہے. The. ڈی قیمت بابل کو بتاتا ہے کہ نتائج میں رکھا جانا چاہئے lib. فولڈر - اس مرحلے کے ساتھ اعداد و شمار سے پتہ چلتا ہے کہ فولڈر مکھی پر پیدا ہوتا ہے.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
چلائیں تعمیر
& gt؛ [email protected] تعمیر / گھر / تانان /
ورکس بیک 7.
& gt؛ بابیل index.js -d lib.
بابل کے ساتھ 1 فائل کامیابی سے مرتب کیا. 

05. ترتیب کا ایک سوال

مزید ترتیب کے اختیارات کے بغیر بابل کو مدعو کرنا ٹرانسپلیشن کو فعال نہیں کرتا. کوڈ صرف اس صورت میں منتقل کیا جاسکتا ہے جب فریم ورک کو ہدف ماحول کے بارے میں مزید معلومات حاصل ہوتی ہے. یہ ایک کمانڈ لائن پیرامیٹر کے ذریعہ کیا جا سکتا ہے، یا نام سے ایک فائل بنانا babelrc. منصوبے کی جڑ میں.

06. بیبیلر کو ترتیب دیں

بابل خود کو پلگ ان کے سیٹ کے ذریعہ ترتیب دیتا ہے، جن میں سے ہر ایک کو ٹرانسمیشن کو کوڈ بیس میں تبدیل کرتا ہے. ہم استعمال کرتے ہیں پیش سیٹ-این این پیکیج - یہ سب سے زیادہ اڈوں کو احاطہ کرنے کے لئے تبدیل کرنے کے پہلے سے ترتیب شدہ سیٹ کے ساتھ آتا ہے.

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

07. ایک ٹیسٹ ڈرائیو کے لئے وقت

کچھ زندہ کوڈ کے خلاف پروگرام کی جانچ کرنے کے لئے index.js میں نئے عمر کی جاوا اسکرپٹ کا تھوڑا سا شامل کریں. اس قدم کے ساتھ کوڈ میراث براؤزرز پر کام نہیں کرے گا - جب کیا ہوا، واضح فنکشن ایک کے ساتھ تبدیل ہوجاتا ہے عمومی اعلان، جیسا کہ اعداد و شمار میں دکھایا گیا ہے.

فنکشن tamstest () {
[1، 2، 3] .map ((n) = & gt؛ n + 1)؛
} 

08. ھدف کو ایڈجسٹ کریں

پیش سیٹ-این این ڈیفالٹ کی طرف سے سب سے زیادہ ٹرانسمیشن لاگو ہوتا ہے: مصنوعات کا مقصد بینڈوڈتھ اور کارکردگی کے اخراجات کے بغیر عالمی طور پر ہم آہنگ جاوا اسکرپٹ پیدا کرنا ہے. آپ A. میں گزرنے سے اپنی ترتیب کو تبدیل کرسکتے ہیں اہداف اعتراض - ذیل میں مثال کے طور پر کروم اور یعنی یعنی مخصوص ورژن.

 {
"presets": [
[
"Babel / preset-env"،
{
"اہداف": {
"کروم": "58"
"یعنی": "11"
}
}
نس]
نس]
} 

09. اعلی درجے کی ھدف بندی

بابل کے براؤزر کی ھدف بندی کروم اور انٹرنیٹ ایکسپلورر تک محدود نہیں ہے. تعاون کے ساتھ شکریہ براؤزرز لسٹ ، ڈویلپرز ذیل میں دکھایا گیا ہے کے طور پر، ڈویلپرز ایک درجن درجن سے زیادہ مقاصد سے مل کر مل سکتے ہیں.

نام غیر حساس ہیں:

• انڈروئد لوڈ، اتارنا Android WebView کے لئے.
• Baidu. Baidu براؤزر کے لئے.
• بلیک بیری یا بی بلیک بیری براؤزر کے لئے.
• کروم گوگل کروم کے لئے.
• Chromedroid. یا and_chr. لوڈ، اتارنا Android کے لئے Chrome کے لئے.
• کنارے مائیکروسافٹ کنارے کے لئے.
• الیکٹران الیکٹران فریم ورک کے لئے. یہ کروم ورژن میں تبدیل کیا جائے گا.
• ایکسپلورر یا یعنی انٹرنیٹ ایکسپلورر کے لئے.
• ExcrearERMOBILE. یا IE_Mob. انٹرنیٹ ایکسپلورر موبائل کے لئے.
• فائر فاکس یا ایف ایف موزیلا فائر فاکس کے لئے.
• فائر فاکسینڈروڈ یا and_ff لوڈ، اتارنا Android کے لئے فائر فاکس کے لئے.
• iOS. یا ios_saf. iOS سفاری کے لئے.
• نوڈ اوپیرا کے لئے node.js.opera کے لئے.
• operamini. یا op_mini. اوپیرا مینی کے لئے.
• operamobile. یا op_mob. اوپیرا موبائل کے لئے.
• qqandroid. یا and_qq. لوڈ، اتارنا Android کے لئے QQ براؤزر کے لئے.
• سفاری ڈیسک ٹاپ سفاری کے لئے.
• سیمسنگ سیمسنگ انٹرنیٹ کے لئے.
• ucandroid. یا and_uc. لوڈ، اتارنا Android کے لئے یو سی براؤزر کے لئے.

10. اعلی درجے کی ھدف بندی، حصہ دو

براؤزر لسٹ بھی اعلی درجے کی سوالات لے سکتے ہیں. اس کے ہوم پیج ترتیب ترتیب کے اختیارات کی فہرست، تقریبا تمام جن میں ترمیم کی طرف سے بابل کے اندر بھی استعمال کیا جا سکتا ہے Babelrc. . سوالات مقامی طور پر اندازہ لگایا جا سکتا ہے اگر آپ کے ورکسشن نے این پی ایکس انسٹال کیا ہے.

 {
"اہداف": "& gt؛ 0.25٪، مردہ نہیں"
} 

11. خود کار طریقے سے ٹرانسمیشن

ہاتھ سے بابل کو دعوت دینے کے بعد جلدی جلدی ہو جاتا ہے. Nodemon افادیت فائلوں کی نگرانی کے وسائل کی نگرانی کرتا ہے اور حکموں کو بند کر دیتا ہے جیسا کہ تبدیلیوں کا پتہ چلا ہے. اصول میں، شامل کرنے کے لئے NoDemon کی حمایت میں ایک چھوٹا سا تبدیلی کے ذریعے سنبھالا جاتا ہے پیکیج. json. .

 {
"نام": "ورکس بیک 7"،
. . .
"مین": "index.js"،
"سکرپٹ":
{
"شروع": "Nodemon --exec Babel-Node
index.js "، 

12. موجودگی کی جانچ پڑتال

کچھ کارکنوں نے Nodemon عالمی سطح پر نصب اگر یہ معاملہ نہیں ہے تو، اس پروگرام کو مدعو کرنا ذیل میں دکھایا گیا ہے جیسے ایک غلطی کا پیغام مل جائے گا. خوش قسمتی سے، تعیناتی Nodemon آسانی سے اس کے ذریعے مکمل کیا جاتا ہے این پی ایم انسٹال کمانڈ.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
انسٹال کریں - ڈیو ڈو نوڈیمیم 

13. فعالیت کی جانچ پڑتال کریں

آگ سے دور این پی ایم شروع ٹرمینل ونڈو میں اور مواد کو تبدیل کرنے کے لئے آگے بڑھنا index.js. Gedit کی طرح ایڈیٹر کے ساتھ یا بصری سٹوڈیو کوڈ . بچانے کے بعد، Nodemon پیداوار کی حیثیت کی معلومات ہوگی.

 [Nodemon] تبدیلیاں کی وجہ سے دوبارہ شروع ...
[Nodemon] `Babel-Node Index.js` شروع
[Nodemon] صاف نکلیں - تبدیلیوں کا انتظار کر رہا ہے
دوبارہ شروع کرنے سے پہلے 

14. ٹرانسمیشن کو درست کریں

جبکہ Nodemon اس موقع پر، اس کے مواد کو بے بنیاد طور پر کام کرنا چاہئے index.js. فائل میں پایا جاتا ہے lib. اپ ڈیٹ نہ کریں. یہ ایک اور کی وجہ سے ہے بابیل نوڈ - یہ ٹرانسمیشن فائلوں کو ڈسک میں نہیں کرتا. اس کے بجائے نوڈ CLI کے ایک نظر ثانی شدہ ورژن کو آگیا، جو ٹرانسمیشن فائلوں کے ساتھ کام کرتا ہے.

15. ٹرانسمیشن کوڈ پروگرامنگ

بابل کمانڈ لائن پر کام کرنے تک محدود نہیں ہے. اگر صحیح پیکجوں کو انسٹال کیا جاتا ہے تو، کوڈ کسی دوسرے پروگرام سے بھی منتقلی کی جا سکتی ہے. اس مرحلے کے ساتھ اسپیپیٹ ایک ان پٹ سٹرنگ میں بنیادی تبدیلیوں کا ایک سیٹ لاگو ہوتا ہے. ذہن میں رکھو کہ ترتیب ترتیب ترتیبات، عام طور پر، ایک سے حاصل کی جاتی ہیں Babelrc. فائل.

 var Babel = کی ضرورت ہے ("Babel / Core")؛
@ babel / core "سے {ٹرانسمیشن} درآمد کریں؛
"Babel / Core" سے بابل کے طور پر * درآمد کریں؛
Babel.Transform ("کوڈ ()؛"، اختیارات،
فنکشن (غلطی، نتیجہ) {
نتیجہ. کوڈ
نتیجہ. میپ؛
نتیجہ
})؛ 

16. مکمل فائلوں کو ٹرانسمیشن

ذریعہ کوڈ عام طور پر سٹرنگ متغیر میں ذخیرہ نہیں ہوتا. فائل سے متعلقہ افعال کے ایک سیٹ کے ذریعہ اس کے لئے بابیل API اکاؤنٹس، جس میں ایک فائل نام کے ساتھ متغیر کے لئے ان پٹ سٹرنگ کے لئے. تاہم، نتائج ایک عام جاوا اسکرپٹ متغیر کے طور پر واپس آ جائیں گے.

 Babel.transformfile ("filename.js"، اختیارات،
فنکشن (غلطی، نتیجہ) {
نتیجہ // = & gt؛ {کوڈ، نقشہ، ast}
}
)؛ 

17. ہم آہنگی اور ایسوسی ایشن

بابیل 7 نے سب سے زیادہ API کالوں کے مطابقت پذیری اور اقوام متحدہ کے ورژن متعارف کرایا. اپنی ضروریات کے لئے صحیح ایک کو منتخب کرنے کے لئے یقینی بنائیں - جبکہ چھوٹے مثالوں کو پرواز پر کیا جا سکتا ہے، بابل کو زیادہ پیچیدہ فائلوں پر ترتیب دینے کے لۓ آسانی سے درجنوں سیکنڈ میں چل رہا ہے.

18. انفرادی پلگ ان کے بارے میں جانیں

کیا آپ کبھی بھی اپنے آپ کو سوچنے کے بارے میں سوچتے ہیں کہ پس منظر میں کیا ہوتا ہے، بس کا دورہ کریں یہ صفحہ . یہ فی الحال بابل کی تقسیم میں موجود تمام پلگ ان کی ایک فہرست فراہم کرتا ہے، اور ان کے اپنے پلگ ان کو تخلیق کرنے کے لئے ان تمام لوگوں کے لئے کچھ اشارے بھی شامل ہیں.

19. اقسام کی قسم کی وضاحتیں نکالیں

بابیل نئے عمر جاوا اسکرپٹ عناصر کو ٹرانسمیشن تک محدود نہیں ہے. اس کی مصنوعات میں ایک نمایاں رکاوٹ اقسام کے انجن پر مشتمل ہے. یہ ٹائپنگ کی معلومات سے باہر نکلتا ہے اور اعلی درجے کی عناصر کو تبدیل کرتا ہے. افسوس سے، بابیل قسم کی جانچ پڑتال نہیں کرتا ہے - یہ اقسام کی زبان کے سب سے اہم فوائد میں سے ایک کو ختم کرتا ہے.

 {
"presets": ["@ Babel / preset-lomplyct"]
} 

20. چلائیں Babel آن لائن

جبکہ ٹرانسمیشن آپریشنز عام طور پر آسانی سے کام کرتے ہیں، کبھی کبھی مسائل ہوتے ہیں. اس صورت میں، Babel Lod. مددگار ہے. یہ آپ کے ورکشاپ کے براؤزر میں بابل چلتا ہے اور ایک دوسرے کے ساتھ ان پٹ اور آؤٹ پٹ کو ظاہر کرتا ہے.

21. درد کے بارے میں جانیں

ہمارے تعارف نے وضاحت کی کہ بابیل مختلف منصوبوں میں وسیع پیمانے پر استعمال دیکھتا ہے. بابیل کی بحالی کی ٹیم اے کے ساتھ ورژن اپ گریڈ کو آسان بناتا ہے تفصیلی تبدیلی لاگ ان . اگر آپ Babel پروگرام کو استعمال کرتے ہیں تو، مشورہ کرنے کے لئے مت بھولنا API اپ گریڈ گائیڈ .

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 283 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 283 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

• کس طرح تیزی سے کوڈ، ہلکا جاوا اسکرپٹ
• 5 بہت اچھے جاوا اسکرپٹ API.
• 27 اوپر کلاس ویب سائٹ ٹیمپلیٹس