BabelJS - Babel Polyfill
Babel Polyfill เพิ่มการรองรับเว็บเบราว์เซอร์สำหรับคุณสมบัติต่างๆซึ่งไม่มีให้ใช้งาน Babel รวบรวมโค้ดจาก ecma เวอร์ชันล่าสุดไปจนถึงโค้ดที่เราต้องการ มันเปลี่ยนไวยากรณ์ตามที่ตั้งไว้ล่วงหน้า แต่ไม่สามารถทำอะไรกับวัตถุหรือวิธีการที่ใช้ เราต้องใช้ polyfill สำหรับคุณสมบัติเหล่านั้นเพื่อความเข้ากันได้แบบย้อนหลัง
คุณสมบัติที่สามารถเติมได้
ต่อไปนี้เป็นรายการคุณสมบัติที่ต้องการการสนับสนุน polyfill เมื่อใช้ในเบราว์เซอร์รุ่นเก่า -
- Promises
- Map
- Set
- Symbol
- Weakmap
- Weakset
- Array.from, Array.includes, Array.of, Array # find, Array.buffer, Array # findIndex
- Object.assign, Object.entries, Object.values
เราจะสร้างการตั้งค่าโครงการและดูการทำงานของ babel polyfill
คำสั่ง
npm init
ตอนนี้เราจะติดตั้งแพ็คเกจที่จำเป็นสำหรับ Babel
แพ็คเกจสำหรับ Babel 6
npm install babel-cli babel-core babel-preset-es2015 --save-dev
แพ็คเกจสำหรับ Babel 7
npm install @babel/cli @babel/core @babel/preset-env --save-dev
นี่คือแพ็คเกจสุดท้าย json -
นอกจากนี้เราจะเพิ่ม es2015 ลงในค่าที่ตั้งไว้เนื่องจากเราต้องการรวบรวมโค้ดเป็น es5
.babelrc for babel 6
.babelrc for babel 7
{
"presets":["@babel/env"]
}
เราจะติดตั้ง lite-serve เพื่อให้เราสามารถทดสอบโค้ดของเราในเบราว์เซอร์ -
npm install --save-dev lite-server
ให้เราเพิ่มคำสั่ง babel เพื่อรวบรวมโค้ดของเราใน package.json -
เรายังได้เพิ่มคำสั่ง build ซึ่งเรียกใช้ lite-server
Babel-polyfill ได้รับการติดตั้งพร้อมกับแพ็คเกจ babel-core babel-polyfill จะพร้อมใช้งานในโมดูลโหนดดังที่แสดงด้านล่าง -
เราจะดำเนินการตามคำมั่นสัญญาต่อไปและใช้ babel-polyfill ควบคู่ไปด้วย
ES6 - คำสัญญา
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;");
});
คำสั่ง
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;");
});
การเรียบเรียงไม่จำเป็นต้องเปลี่ยนแปลงอะไร รหัสสำหรับสัญญาปรากฏขึ้นตามที่เป็นอยู่ แต่เบราว์เซอร์ที่ไม่รองรับคำสัญญาจะทำให้เกิดข้อผิดพลาดแม้ว่าเราจะรวบรวมโค้ดเป็น es5 แล้วก็ตาม
ในการแก้ปัญหานี้เราต้องเพิ่ม polyfill พร้อมกับโค้ดที่คอมไพล์ es5 สุดท้าย ในการรันโค้ดในเบราว์เซอร์เราจะนำไฟล์ babel-polyfill จากโมดูลโหนดและเพิ่มลงในไฟล์. html ที่เราต้องการใช้สัญญาตามที่แสดงด้านล่าง -
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>
เอาท์พุท
ในไฟล์ index.html เราได้ใช้ไฟล์ polyfill.min.js จากไฟล์ node_modules ตามด้วยสัญญา _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 - ต้องใช้ไฟล์ Polyfill ในตอนเริ่มต้นก่อนการเรียกใช้จาวาสคริปต์หลัก
ช่องว่างสตริง
ช่องว่างของสตริงจะเพิ่มสตริงอื่นจากด้านซ้ายตามความยาวที่ระบุ ไวยากรณ์สำหรับการขยายสตริงมีดังที่แสดงด้านล่าง -
ไวยากรณ์
str.padStart(length, string);
str.padEnd(length, string);
ตัวอย่าง
const str = 'abc';
console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));
เอาต์พุต
_____abc
abc_____
Babel - ES5
npx babel strpad.js --out-file strpad_es5.js
คำสั่ง
'use strict';
var str = 'abc';
console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));
ต้องใช้ js ร่วมกับ babel-polyfill ดังที่แสดงด้านล่าง -
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>
แผนที่ชุด WeakSet WeakMap
ในส่วนนี้เราจะเรียนรู้เกี่ยวกับMap, Set, WeakSet, WeakMap.
Map เป็นวัตถุที่มีคู่คีย์ / ค่า
Set ยังเป็นวัตถุ แต่มีค่าเฉพาะ
WeakMap and WeakSet นอกจากนี้ยังมีวัตถุที่มีคู่คีย์ / ค่า
Map, Set, WeakMap และ WeakSet เป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาใน ES6 ในการถ่ายทอดเพื่อใช้ในเบราว์เซอร์รุ่นเก่าเราจำเป็นต้องใช้ประโยชน์จากโพลีฟิลล์ เราจะทำงานกับตัวอย่างและใช้ polyfill เพื่อรวบรวมโค้ด
ตัวอย่าง
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));
เอาต์พุต
Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello
คำสั่ง
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 ร่วมกับ babel-polyfill ดังที่แสดงด้านล่าง -
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>
เอาต์พุต
วิธีการอาร์เรย์
คุณสมบัติและวิธีการหลายอย่างสามารถใช้ได้กับอาร์เรย์ ตัวอย่างเช่น array.from, array.includes เป็นต้น
ให้เราพิจารณาดำเนินการตามตัวอย่างต่อไปนี้เพื่อทำความเข้าใจสิ่งนี้ให้ดีขึ้น
ตัวอย่าง
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]
คำสั่ง
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;
}));
เมธอดที่ใช้กับอาร์เรย์จะถูกพิมพ์ตามที่เป็นอยู่ เพื่อให้ใช้งานได้กับเบราว์เซอร์รุ่นเก่าเราจำเป็นต้องเพิ่มไฟล์ polyfill ที่จุดเริ่มต้นดังที่แสดงด้านล่าง
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>