Persiapan dengan Babel 7

Javascript unik karena luasnya ekosistem. Sementara standar baru menambah gula sintaksis, membuatnya didukung pada browser membutuhkan waktu. Babel bekerja di sekitar masalah ini melalui transpilasi otomatis.

Gagasan di balik produk ini sederhana: Babel mengambil kode ES6 atau ES7 dan menggantikan elemen sintaksis baru dengan kode emulasi. Outputnya mengkonfirmasi ke sintaksis JavaScript klasik dan berjalan pada browser yang lebih lama seperti Internet Explorer.

Rilis awal Babel mengambil dunia dengan badai. Segera setelah itu pertama kali muncul, berbagai kerangka kerja seperti bereaksi, Vue dan Ember memeluknya. Pengembang sering menggunakan produk tanpa mengetahui bahwa ia bekerja di latar belakang - lebih dari satu proyek NPM populer memiliki ketergantungan pada Babel.

• Cara Membuat Aplikasi

Ketergantungan ini mengubah proses pelepasan pendahulu menjadi perselingkuhan yang penuh konflik. Versi 7, masih dikelola oleh tim pemelihara kecil, sehingga mencoba untuk menjadi kompatibel sesuatnya. Memecah perubahan sedikit dan jauh antara, sementara kualitas pembuatan kode tetap tinggi (jika Anda bekerja dengan tim, menyimpan dokumen di penyimpanan awan akan membantu Anda tetap kohesif).

Jika Anda belum pernah bekerja dengan Babel sebelumnya, biarkan ini panduan Anda. Mampu menggunakan fitur JavaScript canggih tanpa kekhawatiran kompatibilitas membuat hidup lebih mudah.

Apakah Anda ingin beberapa alat untuk merampingkan proses Anda? Panduan kami untuk yang terbaik Pembangun Situs Web akan membantu. Ingin dukungan jangka panjang? Dapatkan hak hosting web. layanan.

01. Periksa versi

Babel biasanya hidup di lingkungan runtime node. Mari kita mulai dengan memeriksa versi yang digunakan. Output memberikan versi status yang ditemukan pada workstation Ubuntu 14.04 yang digunakan untuk membuat artikel berikut. Ini bukan pedantry - angka yang menyertai langkah ini menunjukkan bahwa tim Babel menjatuhkan dukungan untuk beberapa versi node.js.

 Tamhan @ Tamhan-Thinkpad: ~ $ node --version
v8.14.0.
Tamhan @ Tamhan-Thinkpad: ~ $ NPM --version
6.4.1 

02. Perubahan nama paket

Satu perubahan putus dalam versi 7 telah melibatkan memindahkan paket Babel ke namespace mereka sendiri. Paket yang lebih tua tidak dihapus dari berbagai repositori. Ini penting, karena penggunaan nama paket warisan mengarah pada situasi yang ditunjukkan pada gambar yang menyertai langkah ini.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Instal --Save-dev @ Babel / Core @ Babel / CLI @
Babel / Preset-Env @ Babel / Node
. . .
+ @ Babel / Core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ Babel / CLI @ 7.2.0
+ @ Babel / Preset-Env @ 7.2.0 

03. Tambahkan tindakan build

Langkah di atas mengasumsikan bahwa Anda bekerja di dalam proyek NPM. Dalam hal ini, menjalankan Babel melalui aksi build itu mudah. Buka package.json. dan memodifikasinya sebagaimana diperagakan dalam kode di bawah ini:

 {
. . .
"Utama": "index.js",
"Scripts": {
"Tes": Kesalahan "Echo \": Tidak ada tes
ditentukan \ "& amp; & amp; keluar 1",
"Build": "Babel index.js -d lib"

}, 

04. Kode transpil dengan tangan

Menempatkan Babel untuk bekerja melibatkan menembakkan aksi build. Ini terbaik dilakukan melalui perintah NPM Run. Itu -d. nilai menginformasikan Babel bahwa hasilnya harus ditempatkan di lib. Folder - Gambar yang menyertai langkah ini menunjukkan bahwa folder dibuat dengan cepat.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Jalankan Build.
& gt; [email protected] Build / Home / Tamhan /
WorkspaceB7.
& gt; babel index.js -d lib
Berhasil mengkompilasi 1 file dengan Babel. 

05. Pertanyaan konfigurasi

Meminta Babel tanpa opsi konfigurasi lebih lanjut tidak memungkinkan transpilasi. Kode dapat ditranspung hanya jika kerangka kerja menerima informasi lebih lanjut tentang lingkungan target. Ini dapat dilakukan melalui parameter baris perintah, atau dengan membuat file yang disebut .babelrc. di root proyek.

06. Mengkonfigurasi BABELRC

Babel mengkonfigurasi dirinya melalui satu set plugin, yang masing-masing menerapkan transpilasi berubah ke basis kode. Kami menggunakan Preset-Env. Paket - Muncul dengan set transformasi pra-konfigurasi yang dimaksudkan untuk mencakup sebagian besar basis.

 {
"Preset": ["@ Babel / Preset-Env"]
} 

07. Waktu untuk test drive

Tambahkan sedikit javascript tahun baru ke index.js untuk menguji program terhadap beberapa kode langsung. Kode yang menyertai langkah ini tidak akan berfungsi pada browser legacy - bila selesai, fungsi implisit diganti dengan a normal deklarasi, seperti yang ditunjukkan pada gambar.

fungsi tamstest () {
[1, 2, 3] .map ((n) = & gt; n +1);
} 

08. Sesuaikan penargetan

Preset-Env. Menerapkan sebagian besar transpilasi secara default: Tujuan produk adalah untuk membuat JavaScript yang kompatibel secara universal tanpa memperhatikan bandwidth dan biaya kinerja. Anda dapat mengubah konfigurasinya dengan melewati a Target. Objek - Contoh di bawah ini menargetkan versi khusus Chrome dan IE.

 {
"Preset": [
[
"@ Babel / Preset-Env",
{
"Target": {
"Chrome": "58",
"Yaitu": "11"
}
}
]
]
} 

09. Target Tingkat Lanjut

Penargetan browser Babel tidak terbatas pada Chrome dan Internet Explorer. Berkat kerjasama dengan browserlist. , pengembang dapat mencampur dan mencocokkan dari lebih dari selusin target, seperti yang ditunjukkan di bawah ini.

Nama adalah kasus tidak sensitif:

• Android. Untuk WebView Android.
• Baidu. untuk browser Baidu.
• BlackBerry. atau BB. untuk BlackBerry Browser.
• Chrome. Untuk Google Chrome.
• Chromeandroid atau and_chr. Untuk Chrome untuk Android.
• Tepi untuk Microsoft Edge.
• Elektron untuk kerangka kerja elektron. Ini akan dikonversi ke versi Chrome.
• Penjelajah atau yaitu Untuk Internet Explorer.
• Explorermobile. atau ie_mob. Untuk Internet Explorer Mobile.
• Firefox. atau FF. untuk Mozilla Firefox.
• Firefoxandroid. atau and_ff. Untuk Firefox untuk Android.
• ios. atau ios_saf. untuk iOS Safari.
• Node. untuk node.js.opera untuk opera.
• Opera Mini atau op_mini. untuk opera mini.
• Operamobile. atau op_mob. untuk opera mobile.
• Qqandroid. atau and_qq. Untuk browser QQ untuk Android.
• Safari. untuk safari desktop.
• Samsung. Untuk Samsung Internet.
• Ucandroid. atau and_uc. Untuk UC Browser untuk Android.

10. Penargetan Lanjutan, Bagian Dua

Browserlist juga dapat mengambil kueri lanjutan. Beranda Daftar opsi konfigurasi, hampir semua yang juga dapat digunakan di dalam Babel dengan memodifikasi Babelrc. . Kueri dapat dievaluasi secara lokal jika workstation Anda memiliki NPX diinstal.

 {
"Target": "& gt; 0,25%, tidak mati"
} 

11. Transpilasi otomatis

Harus meminta Babel dengan tangan menjadi membosankan dengan cepat. Monitor Utilitas Nodemon Monitor Sumber Daya FileSistem dan membakar perintah saat perubahan terdeteksi. Secara teori, menambahkan dukungan Nodemon ditangani melalui perubahan kecil ke package.json. .

 {
"Nama": "WorkspaceB7",
. . .
"Utama": "index.js",
"Scripts":
{
"Mulai": "Nodemon --Exec Babel-node
index.js ", 

12. Periksa kehadiran

Beberapa workstation memiliki Nodemon. dipasang secara global. Jika bukan itu masalahnya, donoking program akan menghasilkan pesan kesalahan yang mirip dengan yang ditunjukkan di bawah ini. Untungnya, penyebaran Nodemon. mudah dicapai melalui NPM Install. perintah.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkspaceB7 $ NPM
Instal --Save-dev Nodemon 

13. Periksa fungsionalitas

Menembakkan NPM Mulai di jendela terminal dan lanjutkan untuk mengubah konten index.js. dengan editor seperti GEDIT atau Kode Visual Studio . Setelah menabung, Nodemon. akan menghasilkan informasi status.

 [Nodemon] restart karena perubahan ...
[Nodemon] Memulai `Babel-Node Index.js`
[Nodemon] Bersihkan Keluar - Menunggu Perubahan
sebelum restart 

14. Perbaiki Transpilasi

Sementara Nodemon. deteksi harus bekerja dengan sempurna pada titik ini, isi dari index.js. file yang ditemukan di lib. Jangan perbarui. Ini disebabkan oleh kebaikan Babel-Node. - Tidak melakukan file transpiled ke disk. Ini malah melepaskan versi yang dimodifikasi dari Node CLI, yang berfungsi dengan file yang ditranspung.

15. Kode transpil secara terprogram

Babel tidak terbatas untuk mengerjakan baris perintah. Jika paket yang benar diinstal, kode juga dapat ditranspuduk dari program lain. Cuplikan yang menyertai langkah ini menggunakan serangkaian transformasi dasar ke string input. Perlu diingat bahwa pengaturan konfigurasi, biasanya, diperoleh dari a Babelrc. mengajukan.

 var babel = membutuhkan ("@ Babel / Core");
impor {transform} dari "@ Babel / Core";
Impor * sebagai Babel dari "@ Babel / Core";
babel.transform ("kode ();", opsi,
fungsi (err, hasil) {
hasil.code;
hasil.map;
hasil.ast;
}); 

16. Transpil seluruh file

Kode sumber biasanya tidak disimpan dalam variabel string. Babel API menyumbang ini melalui satu set fungsi terkait file, yang melupakan string input untuk variabel dengan nama file. Namun, hasilnya dikembalikan sebagai variabel JavaScript normal.

 BABEL.TRANFORMFILE ("filename.js", opsi,
fungsi (err, hasil) {
hasil; // = & gt; {kode, peta, ast}
}
); 

17. Sinkronisasi dan Async

Babel 7 memperkenalkan versi sinkron dan asinkron dari sebagian besar panggilan API. Pastikan untuk memilih yang tepat untuk kebutuhan Anda - sementara transpiling contoh-contoh kecil dapat dilakukan dengan cepat, pengaturan Babel longgar pada file yang lebih kompleks dapat dengan mudah menyebabkan keterlambatan hingga puluhan detik.

18. Pelajari tentang plugin individual

Jika Anda pernah menemukan diri Anda bertanya-tanya tentang apa yang terjadi di latar belakang, cukup kunjungi halaman ini . Ini menyediakan daftar semua plugin yang saat ini terkandung dalam distribusi Babel, dan juga berisi beberapa petunjuk untuk semua yang ingin membuat plugin mereka sendiri.

19. Strip out spesifikasi naskah

Babel tidak terbatas pada transpiling elemen JavaScript baru. Produk ini berisi mesin tekan yang dibatasi fitur. Ini melampaui informasi mengetik dan menggantikan elemen-elemen canggih. Sayangnya, Babel tidak melakukan pemeriksaan tipe - ini menghilangkan salah satu manfaat paling signifikan dari bahasa penitipan.

 {
"Preset": ["@ Babel / Preset-Discript"]
} 

20. Jalankan Babel Online

Sementara operasi transpilasi biasanya bekerja dengan lancar, masalah kadang-kadang terjadi. Dalam hal itu, Babel Repl. membantu. Ini menjalankan Babel di browser workstation Anda dan menunjukkan input dan output tepat di samping satu sama lain.

21. Pelajari tentang Poin Pain

Pendahuluan kami menjelaskan bahwa Babel melihat dengan luas penggunaan di berbagai proyek. Tim pemelihara Babel menyederhanakan peningkatan versi dengan a log perubahan terperinci . Jika Anda menggunakan Babel secara terprogram, jangan lupa untuk berkonsultasi Panduan Upgrade API .

Artikel ini awalnya diterbitkan dalam edisi 283 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 283 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• Cara kode lebih cepat, lebih ringan JavaScript
• 5 apis javascript yang luar biasa
• 27 templat situs web kelas atas