package.json中的browserslist

介绍

 # package.json

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

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

本地查看

$ 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

最佳配置

最省事

"browserslist": [
   "defaults"
 ]

指定版本

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

指定浏览器

last 2 Chrome versions

作用

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

<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

{
  "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