1
00:00:02,210 --> 00:00:09,240
Kami ingin memastikan bahwa Westpac memahami javascript generasi berikutnya sehingga kami dapat menggunakan fitur javascript modern dalam

2
00:00:09,250 --> 00:00:15,280
kode kami dan tetap mengirimkan kode yang benar-benar berjalan di browser lama juga.

3
00:00:15,440 --> 00:00:22,790
Dan selain itu kami juga ingin memastikan bahwa sintaks reaksi ini dipahami bahwa j ini adalah X

4
00:00:22,790 --> 00:00:24,170
dan teks dipahami.

5
00:00:24,440 --> 00:00:31,010
Sekarang untuk itu kita perlu menginstal paket tambahan tertentu yang berfungsi untuk berkumpul dengan Westpac atau yang dapat digunakan

6
00:00:31,010 --> 00:00:33,230
dalam alur kerja halaman web kita.

7
00:00:33,380 --> 00:00:41,160
Dan itu Babel yang Anda instal dengan npm instal dasbor,

8
00:00:41,160 --> 00:01:00,100
simpan maut dan kemudian di Babel inti yang kami butuhkan juga di dasbor garis miring Babel dan pada dasbor garis miring Babel bereaksi pada dasbor panggung

9
00:01:00,250 --> 00:01:15,050
dasbor garis miring ke dan meskipun Babel loader di samping juga di lereng Babel plug in dasbor properti dasbor kelas

10
00:01:15,050 --> 00:01:16,050
dasbor.

11
00:01:16,130 --> 00:01:22,480
Jadi banyak yang harus ditulis dan pastikan Anda mendapatkan semuanya ditulis dengan benar kesalahan ketik tidak masalah di sini sudah mati mari kita

12
00:01:22,480 --> 00:01:27,040
tekan enter dan tentu saja saya akan menjelaskan apa yang kami instal di sini sebentar lagi.

13
00:01:27,070 --> 00:01:32,650
Jadi sekarang kita menginstal banyak paket di sini yang pada akhirnya akan

14
00:01:32,650 --> 00:01:41,800
membantu kita mengubah kode javascript kita Babel pada akhirnya adalah proyek pihak ketiga dan pustaka yang melatih tumpukan kode javascript kode

15
00:01:41,800 --> 00:01:48,220
javascript modern ke kode yang juga berjalan di browser lama dan misalnya juga dengan preset

16
00:01:48,220 --> 00:01:54,340
yang tepat diinstal J. S. kode ex menjadi kode javascript biasa

17
00:01:54,340 --> 00:02:00,210
dan itu sebabnya saya menginstal semua preset ini pada akhirnya mereka memberi tahu Babel fitur mana yang dimengerti dan dapat dikompilasi.

18
00:02:00,220 --> 00:02:06,970
Sekarang bagaimana kita menggunakan Babel maka mari kita kembali ke file konflik halaman web dan di sana

19
00:02:06,970 --> 00:02:10,210
Anda perlu menambahkan modul item konfigurasi baru.

20
00:02:10,210 --> 00:02:14,240
Ini adalah objek javascript di mana Anda memiliki array aturan.

21
00:02:14,290 --> 00:02:18,610
Sekarang di sini Anda dapat mengatur aturan tertentu yang berlaku untuk file tertentu.

22
00:02:18,610 --> 00:02:25,750
Setiap aturan adalah objek di mana Anda memiliki properti pengujian di mana Anda memiliki ekspresi reguler yang menentukan file

23
00:02:25,930 --> 00:02:28,750
mana yang harus dipengaruhi oleh aturan itu.

24
00:02:28,750 --> 00:02:32,490
Dan di sini saya ingin mempengaruhi semua file yang diakhiri dengan dot J. S ..

25
00:02:32,800 --> 00:02:34,830
Itulah ungkapan reguler untuk ini.

26
00:02:34,900 --> 00:02:39,910
Jadi file apa pun yang berakhir dengan DOT J. S. akan terpengaruh olehnya sebagai suatu peraturan.

27
00:02:40,210 --> 00:02:42,900
Jadi sekarang kita tahu file mana yang harus terpengaruh.

28
00:02:42,910 --> 00:02:46,310
Kita perlu menentukan apa yang disebut loader.

29
00:02:46,330 --> 00:02:53,470
Ini memberi tahu webpage alat mana yang mengambil alih untuk file ini dan di sini saya ingin menggunakan Babel loader

30
00:02:53,470 --> 00:02:55,140
yang ditentukan sebagai string.

31
00:02:55,150 --> 00:02:58,700
Ini adalah paket babel loader yang kami pasang di sini.

32
00:02:58,720 --> 00:03:05,580
Ini pada dasarnya adalah web Peg plug in Anda bisa mengatakan yang tahu cara menangani file JavaScript dan di mana

33
00:03:05,580 --> 00:03:10,260
Peg dan yang berfungsi untuk berkumpul dengan Westpac untuk mengubah file JavaScript.

34
00:03:10,270 --> 00:03:18,160
Sekarang saya juga ingin menambahkan kunci kecualikan di sini dan mengecualikan apa pun dalam modul simpul karena saya jelas tidak ingin

35
00:03:18,160 --> 00:03:21,100
mencoba mengubah kode apa pun di sana.

36
00:03:21,100 --> 00:03:25,930
Kode ini harus dikirimkan karena siap digunakan dan saya tidak ingin menyentuhnya.

37
00:03:25,990 --> 00:03:30,960
Jadi sekarang kita memberi tahu Babel untuk melihat semua file JavaScript dan melakukan hal tersebut.

38
00:03:30,970 --> 00:03:34,130
Pertanyaannya adalah apa masalahnya.

39
00:03:34,180 --> 00:03:37,070
Apa yang bisa dilakukan Babel dengan itu.

40
00:03:37,090 --> 00:03:42,100
Untuk itu kami menambahkan file baru ke proyek file dot Babel r c.

41
00:03:42,100 --> 00:03:43,690
Ini adalah file konfigurasi.

42
00:03:43,690 --> 00:03:49,470
Babel akan secara otomatis mencari di mana kita dapat mengkonfigurasi bagaimana Babel berperilaku di sana.

43
00:03:49,510 --> 00:03:57,190
Kami hanya menulis beberapa kode Jason jadi kami telah membungkus kurung kurawal dan kemudian kunci preset yang harus dibungkus dengan tanda

44
00:03:57,190 --> 00:04:04,300
kutip ganda bukan tanda kutip tunggal tidak ada tanda kutip itu harus tanda kutip ganda dan ini memegang array.

45
00:04:04,360 --> 00:04:10,290
Di sini Anda menentukan semua preset yang preset Babel yang ingin Anda terapkan pada kode Anda.

46
00:04:10,390 --> 00:04:18,200
Jadi di sini Anda untuk menemukan Babel harus menangani file JavaScript di Babel R untuk melihat Anda menemukan apa

47
00:04:18,220 --> 00:04:23,690
yang Babel lakukan atau apa yang mampu dilakukannya dengan file-file ini sekarang.

48
00:04:23,780 --> 00:04:31,190
Setiap preset itu sendiri adalah sebuah array sehingga array India di mana Anda hanya memiliki nama preset

49
00:04:31,310 --> 00:04:37,310
misalnya di Babel slash preset dot end dan kemudian konfigurasi untuk preset itu.

50
00:04:37,370 --> 00:04:39,710
Jadi di sini misalnya diatur.

51
00:04:39,770 --> 00:04:41,230
Cert stat halus.

52
00:04:41,240 --> 00:04:48,470
Next Gen Fitur-fitur bagus Java dikompilasi ke JavaScript gen lama dalam opsi di sini.

53
00:04:48,470 --> 00:04:55,880
Kita dapat menentukan kunci target di mana kita memberi tahu Babel untuk browser mana ia harus mengkompilasi

54
00:04:55,880 --> 00:05:05,310
target mengambil browser adalah kunci dalam objeknya dan ini adalah array dengan misalnya penyembah Q Q yang lebih besar yang hilang 1 persen.

55
00:05:05,540 --> 00:05:11,750
Sekarang sintaks yang tepat yang dapat Anda gunakan di sini dapat dilihat dalam preset dan dokumen Babel.

56
00:05:11,930 --> 00:05:19,160
Jadi, jika Anda mencari google di Babel preset berakhir di sana Anda dapat memeriksa konfigurasi daftar browser dan kemudian di sana

57
00:05:19,160 --> 00:05:26,020
jika Anda mengklik browser seperti sumber konflik Anda akan menemukan paket yang digunakan Babel di bawah tenda dan sementara

58
00:05:26,020 --> 00:05:32,050
Anda dapat menentukan browser yang didukung di akhiri apa yang saya lakukan di sini adalah saya memberi

59
00:05:32,050 --> 00:05:37,660
tahu Babel tolong kompilasi kode saya sehingga berfungsi di browser D browser yang memiliki pangsa pasar

60
00:05:37,660 --> 00:05:42,770
lebih besar 1 persen dan 2 kata terakhir dari setiap browser harus didukung.

61
00:05:42,790 --> 00:05:45,260
Nah, itu satu imam yang ingin saya gunakan.

62
00:05:45,340 --> 00:05:48,400
Saya juga memiliki sejumlah preset sehingga dalam preset ini saya menulis.

63
00:05:48,450 --> 00:05:54,550
Tetapi di luar array pertama saya tambahkan di Babel preset bereaksi.

64
00:05:54,550 --> 00:06:00,160
Kita bisa menambahkannya sebagai bagian dari array bersarang seperti yang kita lakukan di sini tapi saya tidak perlu memberikan

65
00:06:00,160 --> 00:06:05,610
konfigurasi khusus untuk itu dan dalam hal ini Anda bisa menambahkan string ke array preset ini seperti ini.

66
00:06:06,070 --> 00:06:14,440
Dan kemudian di sini selain preset saya juga akan menambahkan plug ins plug ins memungkinkan Anda untuk menambahkan pertimbangan ekstra atau perilaku

67
00:06:14,440 --> 00:06:16,270
ekstra dan di sana.

68
00:06:16,270 --> 00:06:24,040
Saya punya satu plug di mana saya ingin menambahkan di Babel slash plug in properti proposisi kelas dasbor proposal.

69
00:06:24,190 --> 00:06:29,530
Apakah kontrol untuk kesalahan Babel sintaks yang keluar atau sintaks yang didukungnya.

70
00:06:29,530 --> 00:06:35,650
Di sini saya ingin mendukung beberapa sintaks javascript yang sedang dalam tahap proposal saat ini dan

71
00:06:35,650 --> 00:06:37,300
belum didukung secara resmi.

72
00:06:37,330 --> 00:06:44,980
Jadi jika Ayah mengkonfigurasi Babel dan sekarang Babel mampu melakukan sesuatu dengan file JavaScript kami.

73
00:06:44,980 --> 00:06:47,700
Sayangnya kami belum selesai.

74
00:06:47,800 --> 00:06:54,430
Masih ada lagi yang harus kita tambahkan untuk benar-benar membangun proyek kita karena misalnya

75
00:06:54,430 --> 00:07:02,980
semua mengimpor dari file CSX dan dalam komponen saya di sini saya juga menggunakan modul CSX sehingga semua harus

76
00:07:02,980 --> 00:07:03,880
didukung.

77
00:07:03,880 --> 00:07:05,260
Jadi mari kita lanjutkan dengan itu.