TS編譯過後對API層面的進行手動Polyfill

TS編譯過後對API層面的補充

• 前言
• 一、什麼是Polyfill
• 二、TS在什麼情況下需要對API進行Polyfill
• 三、core-js如何使用
• • 第一種，直接引入core-js
  • 第二種，babel結合core-js使用
• 四、總結

前言

TS對語言的編譯，隻在文法層面，如果是API層面的補充，需要手動Polyfill。

一、什麼是Polyfill

polyfill：墊片/補充

例如我們開發網頁項目相容浏覽器的操作

if(!window.XMLHttPRequest){
	window.XMLHttPRequest = function(){ ... }
}
           

這就算是對XMLHttpRequest的Polyfill。

二、TS在什麼情況下需要對API進行Polyfill

例如有一個ts檔案内容如下：

interface User{
	name: String
	age: Number
	gender: 'male'|'female'
}
const tony:User = {
	name: "Tony",
	age: 18,
	gender: 'male'
}
const entries = Object.entries(tony)
console.log(entries)
           

其編譯過後為：

"use strict"
var tony = {
	name: "Tony",
	age: 18,
	gender: 'male'
}
var entries = Object.entries(tony)
console.log(entries)
           

ts編譯并不會對API進行編譯轉換，這就導緻在版本較低的不支援這項API的浏覽器中執行代碼會出錯。可以使用node低版本去運作編譯後的js檔案，檢視結果。

我們可以通過引入core-js子產品來解決API層面的問題，core-js幫我們把能被Polyfill的API基本都實作了。比如說Object.defineProperty()，如果是在IE8以下的話，是沒有辦法去實作的。還有就是Promise微任務無法實作，它會用宏任務去代替。

三、core-js如何使用

第一種，直接引入core-js

import "core-js" // 全部引入
// import "core-js/features/object" // 按需引入

interface User{
	name: String
	age: Number
	gender: 'male'|'female'
}
const tony:User = {
	name: "Tony",
	age: 18,
	gender: 'male'
}
const entries = Object.entries(tony)
console.log(entries)
           

編譯結果：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("core-js");
var tony = {
    name: "Tony",
    age: 18,
    gender: 'male'
};
var entries = Object.entries(tony);
console.log(entries);
           

使用node低版本嘗試運作成功。

第二種，babel結合core-js使用

安裝babel

yarn add @babel/core @babel/preset-env @babel/cli @babel/preset-typescript --dev
           

建立babel.config.js檔案

// JSDoc
// @ts-check

/** @type {import("@babel/core").ConfigAPI} */
module.exports = {
    presets:[
        [
            '@babel/env',
            {
                useBuiltIns: 'usage',
                corejs:{
                    version: 3
                }
            }
        ],
        '@babel/typescript' // 不會做ts文法檢測,隻是移除類型注釋
    ]
}
           

編譯

yarn babel .\src\demo.ts -o output.js
           

根據自己需求修改路徑，我這裡是将src目錄下的demo.ts檔案編譯後生成到根目錄下的output.js檔案中。

編譯後：

"use strict";

require("core-js/modules/es.object.entries");

// import "core-js"
var tony = {
  name: "Tony",
  age: 18,
  gender: 'male'
};
var entries = Object.entries(tony);
console.log(entries);
           

這種寫法就不用每次去手動引入core-js了。

四、總結

針對于TS代碼想要在老的環境下運作，對于那些新的API我們需要polyfill。polyfill有兩種方式，一種是手動去polyfill，另一種是使用babel自動地去polyfill