Oi Habr! O curso "Desenvolvedor Fullstack JavaScript" já está começando no otus.ru hoje e eu decidi apoiar os caras com este artigo. A propósito, eu mesmo ensino no curso sobre React.js .
— Don't break the web, " ". — , . ? - IE 6 netscape navigator , : ?
- . : ECMAScript (javascript), CSS Web API. CSS , ,
, ES5, greatest common denominator. ES5 ! ES5 ( ) babel typescript
, babel 7, @babel/preset-es2015
( ) @babel/preset-env
, . , , ( , )?
— . , , , , ! , :
: @babel/preset-env
, ,
caniuse
https://github.com/fyrd/caniuse
caniuse-lite ( browserslist)
. , ( )
browserslist
https://github.com/browserslist/browserslist
. browserslist
(browserSlist S) "> 0.25%, not IE11, not dead" , 0.25% IE11 ( IE 10, IE Mobile 11, BlackBerry 10, BlackBerry 7, Samsung Internet 4 Opera Mobile 12.1)
corejs
ECMAScript 2019- . 3 (https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md)
babel/present-env, 2- 3 -
core-js-compat
https://www.npmjs.com/package/core-js-compat
corejs . . Chrome 80 matchAll
, , 73-
https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/src/data.js#L877
compat-table
https://kangax.github.io/compat-table/es6/
ECMAScript ( ) (nodejs, graalvm etc.)
@babel/preset-env
, — corejs@2
compat-table
, corejs@3
— core-js-compat
( )
:
-
.browserslistrc
(package.json#browserslist
) browserslist query -
babelrc
@babel/preset-env
presetsuseBuiltIns
(entry
usage
API ) - browserslist query
@babel/preset-env
@babel/preset-env
api browserslist
4.1compat-data
4.2 corejs-compat
js ( ). ( ) !
?
, . , happy path
browserslist query
. , : defaults
( > 0.5%, last 2 versions, Firefox ESR, not dead
) 90% ( "" IE 6!). - , () query. - , :
- browserslist query
or
( "") - ""
and
-
not
and
( - ) - , : query https://browserl.ist/ ( S! )
-
, defaults
> 0.5%, last 2 versions, Firefox ESR, not dead
. , . , (Chrome, Firefox, Edge, Opera, Safari IE).
- QQ Browser, 0.2% — https://en.wikipedia.org/wiki/QQ_browser
Tencect, Trident, Chromium, compat-table 2017 (Chromium 53) - UC Browser, 2.88% — https://en.wikipedia.org/wiki/UC_Browser
Android, . - —
UPD Dartess
. — U2, U3, U4. , .
U2 , , , IE8. , . , , 10 .
U3 . , . , . . .
U4 - , . , () .
- Baidu Browser, 0%
, Baidu ( ). . - KaiOS Browser, 0.2% — https://www.kaiostech.com/
KaiOS — , . , . , rule of a thumb — ES5
UPD V1tol
KaiOS , , Firefox 48
- Samsung Internet, 2.73% — https://en.wikipedia.org/wiki/Samsung_Internet
Android Samsung, Chromium (11.1 Chromium 75) - Opera Mini all, 1.17%
( ). ES6 Extreme saving ES5
^ , , IE6 (- Chrome)
,
- autoprefixer CSS
- usage
-
useBuiltIns