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





( ?) . , !



-



, 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