platform/io.sc.platform.developer.doc/asciidoc/9999-appendix/frontend/pollyfill/pollyfill.adoc

= Pollyfill
市面上有很多浏览器，每种浏览器又有不同的版本，所支持的环境各不相同，为了抹平它们之间的差异，
于是出现了 Pollyfill 解决方案，Pollyfill 的作用是通过降级处理，
让新的语法能够运行在其不被支持的浏览器环境中，
常见的 Pollyfill 有 Babel、Autoprefixer 等。

以 Babel 为例，它是怎么判断项目是否需要做降级处理的呢，
答案就是通过 browserslist 查询出需要支持的浏览器列表，然后根据这个列表来做判断。

用 Babel 验证一下，先安装 Babel：
[source,bash]
----
# 在当前项目根目录中执行
npm install --save-dev @babel/core @babel/cli @babel/preset-env
----

创建 babel.config.json 文件,内容如下:
[source,bash]
----
{
  "presets": ["@babel/preset-env"]
}
----

创建 .browserslistrc 文件,内容如下:
[source,bash]
----
chrome 96
----

创建 index.js 文件,内容如下:
[source,javascript]
----
const say = (msg) => {
  console.log(msg)
}
say('hello')
----

运行 babel 编译命令
[source,bash]
----
./node_modules/.bin/babel index.js --out-dir lib
----

查看编译后的文件，发现并没有做降级处理，因为 chrome 96 本身就支持 const 和箭头函数.
[source,javascript]
----
"use strict";

const say = msg => {
  console.log(msg);
};

say('hello');
----

修改 .browserslistrc 让其支持 ie9,内容如下:
[source,bash]
----
chrome 96
ie 9
----

运行编译命令后查看编译文件，发现已做降级处理.
[source,javascript]
----
"use strict";

var say = function say(msg) {
  console.log(msg);
};

say('hello');
----

如果 .browserslistrc 包含版本较旧的浏览器，可能会增大打包文件的体积，
因为一些 api 需要通过 Pollyfill 来实现，比如某些浏览器不支持 Promise，
那么会在打包文件中注入 Promise 的补丁：
[source,javascript]
----
window.Promise = function () {}
----

而版本较新的浏览器本身就支持了 Promise，不需要打补丁。
所以可以根据项目的实际情况适当的设置 .browserslistrc 以减小打包文件的体积。