下位互換性のある脚にハット-必要なブラウザー用にJSをコンパイルする

画像



ハブラーこんにちは!「Fullstack JavaScript開発者」というコースすでにotus.ruで始まっおり、私はこの記事で彼らをサポートすることにしました。ちなみに、私自身が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