Hut auf abwärtskompatiblen Beinen - wir kompilieren JS für die notwendigen Browser

Bild



Hallo habr! Der Kurs "Fullstack JavaScript Developer" beginnt heute auf otus.ru und ich habe beschlossen, die Jungs mit diesem Artikel zu unterstützen. Übrigens unterrichte ich selbst im Kurs auf 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