You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.1 KiB
86 lines
2.1 KiB
= 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 以减小打包文件的体积。
|