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. - , :



  • 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


- , , peace, ! , .




All Articles