Upgrade to Pro — share decks privately, control downloads, hide ads and more …

@babel/polyfill 再確認

muryoimpl
January 24, 2018

@babel/polyfill 再確認

2018/01/24(水) に弊社 コワーキングにて開催されたカレンダー配布回でぐだったLTです

muryoimpl

January 24, 2018
Tweet

More Decks by muryoimpl

Other Decks in Technology

Transcript

  1. @babel/polyfill (babel-polyfilll) core-js regenerator-runtime dialog-polyfill (material-design-lite で利用) raf にある polyfill.js

    (React.js v16 利用時に必要) ( 私が使っている代表的な) polyfill ※ dialog-polyfill は HTML の <dialog> タグを使うためのものです。
  2. Q: polyfill と Shim の違いって何? <!--[if lt IE 9]> <script

    src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
  3. A: Shim は旧環境に新API を提供するも の polyfill はShim の一種でブラウザ間の API の差分をなくすもの

    ※ パテみたいなものが語源? 参考: http://2ality.com/2011/12/shim-vs-polyfill.html
  4. .babelrc の設定でみるべきは以下の2つ 1. useBuiltIns 2. targets.browsers // .babelrc { "presets":

    [ ["@babel/preset-env", { "useBuiltIns": "usage", "targets": { "browsers": ["last 2 versions", "safari 7"] } }] ] }
  5. “usage” | “entry” | false の3 つの値をとれる default は false

    どのように polyfill を import するかが異なる。うまく使うと ファイルサイズを減らせる browserslist から取得した環境に則って、polyfill を差し込む browserslist は後ほど説明する .babelrc の useBuiltIns
  6. entry file に書いてある import “babel/polyfill” を置換して、 使っているpolyfill のimport 文を差し込む global

    で衝突の可能性があるけど、entry file が1 つなら心配 なさそう global._babelpolyfill の値で多重読み込みしているかチェック はしている import "@babel/polyfill"; ↓ // padStart と padEnd を使っている場合 import "core-js/modules/es7.string.pad-start"; import "core-js/modules/es7.string.pad-end"; .babelrc の useBuiltIns: "entry"
  7. babel を通して使うJavaScript コードのサポート対象を指定す るパート 内部的には browserslist という npm package を利用してい

    る browserslist は、クエリをparse して caniuse-lite のデータを 元に対応ブラウザの情報を生成する caniuse-lite は caiuse のデータを元にしている caniuse は https://caniuse.com/ のデータを使っている模様 ここで取得した情報と、preset-env/data の情報をつきあわせ て対象ブラウザに polyfill が必要かどうかを判断している .babelrc の targets.browsers
  8. browserslist をコマンドラインで使ってみると↓ のような感じで情報がとれる これと preset-env のdata 以下にある JSON の情報とつきあわせて判断する %

    npx browserslist "> 1%" and_chr 62 and_uc 11.4 chrome 63 chrome 62 firefox 57 ie 11 ios_saf 11.0-11.2 ios_saf 10.3 op_mini all safari 11 samsung 6.2 samsung 4 .babelrc の targets.browsers
  9. polyfill は未実装の機能をnative に動くようにしてくれる、便 利なライブラリ polyfill は shim 一種。ブラウザ間のJavaScript の機能差異を 埋めてくれる

    .babelrc に useBuildIns があるので使うとよさそう .babelrc に targets.browsers があるので使うとよさそう 雰囲気でなく、あるものちゃんと使っていこう まとめ