Hai, Habr! Kursus "Pengembang JavaScript Fullstack" dimulai pada otus.ru hari ini dan saya memutuskan untuk mendukung orang-orang dengan artikel ini. Ngomong- ngomong, saya sendiri mengajar kursus tentang 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@3 — core-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, ! , .