Hutte sur des jambes rétrocompatibles - compilation de JS pour les navigateurs requis

image



Bonjour habr! Le cours "Développeur JavaScript Fullstack" commence déjà sur otus.ru aujourd'hui et j'ai décidé de soutenir les gars avec cet article. Soit dit en passant, j'enseigne moi-même sur le cours sur 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



https://caniuse.com/



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@3core-js-compat( )





:



  1. .browserslistrc ( package.json#browserslist) browserslist query
  2. babelrc @babel/preset-env presets useBuiltIns ( entry usage API )
  3. browserslist query @babel/preset-env
  4. @babel/preset-env api browserslist

    4.1 compat-data

    4.2 corejs-compat


js ( ). ( ) !



?



, . , happy path



browserslist query



. , : defaults ( > 0.5%, last 2 versions, Firefox ESR, not dead) 90% ( "" IE 6!). - , () query. - , :





( ?) . , !



-



, defaults > 0.5%, last 2 versions, Firefox ESR, not dead. , . , (Chrome, Firefox, Edge, Opera, Safari IE).





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





^ , , IE6 (- Chrome)





,



  • autoprefixer CSS
  • usage
  • useBuiltIns


- , , peace, ! , .




All Articles