背景

前端开发中使用到大量的es2015、2016……等ECMA特性，这些特性需要通过babel转换才可以在浏览器中执行。

通过webpack构建的前端模块均需要进行babel转换，在这个过程中会生成许多polyfill code，这些必须的code即可以通过公共的polyfill进行替代。

本文将介绍如何搭建公共的polyfill服务。

polyfill-service 介绍

polyfill-service 是一套开源的服务，该服务可以根据浏览器和版本的差异，返回不同的polyfill code。

通过该服务高版本浏览器加载的代码体积变少，从而实现提速；低版本会加载polyfil code，实现向下兼容。

注意:该服务仅提供polyfill，并不对JS语法糖生效。

搭建步骤

一、本地布署

git clone https://github.com/Financial-Times/polyfill-service.git
cd polyfill-service
npm install

安装需要梯子，原因: npm install 过程中会下载非npm自身的国外资源。

二、服务器布署

1、将本地布署的项目发布至服务器上(包含node_modules)。

2、发布到服务器上的项目不必再执行npm install，直接通过命令启动。

// 进入polyfill-service目录执行启动命令，启动后将开启8080端口
pm2 start  npm -- run start

启动后，通过nginx将域名跳转至8080端口。

访问路径: /v3/polyfill.min.js?features=es2015&2016&es2017&es2018&es2019

三、项目中使用

1、在项目中通过首个script标签引入polyfill，不能添加异步属性。示例如下:

<script src="https://polyfill-service.xxx.com/v3/polyfill.min.js?features=es2015&2016&es2017&es2018&es2019"></script>

2、在.babelrc文件中指定添加polyfill的浏览器版本

    [
        "@babel/preset-env",
        {
            "targets": "chrome>81, firefox>76", // 未升级时，锁定chrome>81, firefox>76
            "useBuiltIns": "entry",
            "corejs": {
                "version": 3
            }
        }
    ]
]

四、服务更新方案

该服务并不属于经常更新的服务，如存在node_modules包更新时需要先在本地布署再发布。

API

polyfill.io

polyfill搭建

背景