BabelJS - Babel Polyfill
Babel Polyfill menambahkan dukungan ke browser web untuk fitur-fitur yang tidak tersedia. Babel mengkompilasi kode dari versi ecma terbaru ke versi yang kita inginkan. Ini mengubah sintaks sesuai preset, tetapi tidak dapat melakukan apa pun untuk objek atau metode yang digunakan. Kami harus menggunakan polyfill untuk fitur tersebut untuk kompatibilitas ke belakang.
Fitur yang dapat di-polyfill
Berikut adalah daftar fitur yang memerlukan dukungan polyfill saat digunakan di browser lama -
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- Array.from, Array.includes, Array.of, Array # find, Array.buffer, Array # findIndex
- Object.assign, Object.entries, Object.values
Kami akan membuat pengaturan proyek dan juga melihat cara kerja babel polyfill.
perintah
npm init
Kami sekarang akan menginstal paket yang diperlukan untuk babel.
Paket untuk babel 6
npm install babel-cli babel-core babel-preset-es2015 --save-dev
Paket untuk babel 7
npm install @babel/cli @babel/core @babel/preset-env --save-dev
Ini adalah package.json terakhir -
Kami juga akan menambahkan es2015 ke preset, karena kami ingin mengkompilasi kode ke es5.
.babelrc for babel 6
.babelrc for babel 7
{
"presets":["@babel/env"]
}
Kami akan menginstal layanan lite sehingga kami dapat menguji kode kami di browser -
npm install --save-dev lite-server
Mari kita tambahkan perintah babel untuk mengkompilasi kode kita di package.json -
Kami juga menambahkan perintah build yang memanggil lite-server.
Babel-polyfill diinstal bersama dengan paket babel-core. Babel-polyfill akan tersedia dalam modul node seperti yang ditunjukkan di bawah ini -
Kami akan mengerjakan promise lebih lanjut dan menggunakan babel-polyfill bersama dengannya.
ES6 - Janji
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log("%c"+msg, "font-size:25px;color:red;");
});
perintah
npx babel promise.js --out-file promise_es5.js
BabelJS - ES5
"use strict";
var timingpromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then(function (msg) {
console.log("%c"+msg, "font-size:25px;color:red;");
});
Kompilasi tidak perlu mengubah apapun. Kode untuk janji telah tersingkap sebagaimana adanya. Namun browser yang tidak mendukung promise akan memberikan error meskipun kita telah mengkompilasi kodenya ke es5.
Untuk mengatasi masalah ini, kita perlu menambahkan polyfill bersama dengan kode kompilasi es5 terakhir. Untuk menjalankan kode di browser, kita akan mengambil file babel-polyfill dari modul node dan menambahkannya ke file .html di mana kita ingin menggunakan promise seperti yang ditunjukkan di bawah ini -
index.html
<html>
<head>
</head>
<body>
<h1>Babel Polyfill Testing</h1>
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script type="text/javascript" src="promise_es5.js"></script>
</body>
</html>
keluaran
Di file index.html, kami telah menggunakan file polyfill.min.js dari node_modules diikuti oleh promise_es5.js -
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script type="text/javascript" src="promise_es5.js"></script>
Note - File Polyfill harus digunakan di awal sebelum panggilan javascript utama.
String Padding
String padding menambahkan string lain dari sisi kiri sesuai panjang yang ditentukan. Sintaks untuk string padding adalah seperti di bawah ini -
Sintaksis
str.padStart(length, string);
str.padEnd(length, string);
Contoh
const str = 'abc';
console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));
Keluaran
_____abc
abc_____
Babel - ES5
npx babel strpad.js --out-file strpad_es5.js
perintah
'use strict';
var str = 'abc';
console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));
Js harus digunakan bersama dengan babel-polyfill seperti yang ditunjukkan di bawah ini -
test.html
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing </title>
</head>
<body>
<script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="strpad_es5.js"></script>
</body>
</html>
Map, Set, WeakSet, WeakMap
Pada bagian ini, kita akan belajar tentangMap, Set, WeakSet, WeakMap.
Map adalah objek dengan pasangan kunci / nilai.
Set juga merupakan objek tetapi dengan nilai unik.
WeakMap and WeakSet iare juga objek dengan pasangan kunci / nilai.
Map, Set, WeakMap dan WeakSet adalah fitur baru yang ditambahkan ke ES6. Untuk mentranspilasinya agar dapat digunakan di browser lama, kita perlu menggunakan polyfill. Kami akan mengerjakan contoh dan menggunakan polyfill untuk mengkompilasi kode.
Contoh
let m = new Map(); //map example
m.set("0","A");
m.set("1","B");
console.log(m);
let set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);
let ws = new WeakSet(); //weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));
let wm = new WeakMap(); //weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));
Keluaran
Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello
perintah
npx babel set.js --out-file set_es5.js
Babel-ES5
"use strict";
var m = new Map(); //map example
m.set("0", "A");
m.set("1", "B");
console.log(m);
var set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);
var ws = new WeakSet(); //weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));
var wm = new WeakMap(); //weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));
Js harus digunakan bersama dengan babel-polyfill seperti yang ditunjukkan di bawah ini -
test.html
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="set_es5.js"></script>
</body>
</html>
Keluaran
Metode Array
Banyak properti dan metode dapat digunakan pada array; misalnya, array.from, array.includes, dll.
Mari kita pertimbangkan untuk mengerjakan contoh berikut untuk memahami ini lebih baik.
Contoh
arraymethods.js
var arrNum = [1, 2, 3];
console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));
Output
true
[6, 8, 10]
perintah
npx babel arraymethods.js --out-file arraymethods_es5.js
Babel-es5
"use strict";
var arrNum = [1, 2, 3];
console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));
Metode yang digunakan pada larik dicetak sebagaimana adanya. Untuk membuatnya berfungsi di browser lama, kita perlu menambahkan file polyfill di awal seperti yang ditunjukkan di bawah ini -
index.html
<html>
<head></head>
<body>
<h1>Babel Polyfill Testing</h1>
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
<script type="text/javascript" src="arraymethods_es5.js"></script>
</body>
</html>