前端analysis | 3w & 1h

《Node》- package.json中的browserslist

2020-12-04

介绍

1
2
3
4
5
6
7
# package.json

"browserslist": [
"defaults",
"not IE 11",
"maintained node versions"
]

前端工具直接都支持的浏览器和node版本配置,原文如下:

本地查看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5

概念解释

dead

连续24个月不更新或者不在支持。譬如 IE 10, IE_Mob 11, BlackBerry 10, BlackBerry 7, Samsung 4 and OperaMobile 12.1

defaults

>0.5%, last 2 versions, Firefox ESR, not dead

最佳配置

最省事

1
2
3
"browserslist": [
"defaults"
]

指定版本

1
2
3
4
"browserslist": [
"> 0.5%, last 2 versions, Firefox ESR, not dead"
]

指定浏览器

1
last 2 Chrome versions

作用

不同大小前端资源文件加载。支持ES6语法的不用加载polyfills。支持ES5,加载type=module,不支持的加载nomodule。

1
2
3
4
5
6
7
8
9
10
<script src="runtime-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="polyfills-es5.js" nomodule></script>
<script src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule></script>
<script src="vendor-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule></script>
<script src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule></script>

如何实现

还需要介个tsconfig.json文件中target

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"compileOnSave": false,
"compilerOptions": {
...
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}

BROWSERSLIST ES TARGET BUILD RESULT
ES5 support disabled es2015 Single build, ES5 not required
ES5 support enabled es5 Single build w/conditional polyfills for ES5 only
ES5 support enabled es2015 Differential loading (two builds w/conditional polyfills)

参考

browserslist
differential-loading

Tags: node
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏