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