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
    再確認
    2018
    アジャイル事業部 年始のご挨拶
    2
    月担当: muryoimpl (
    無量井 健)

    View full-size slide

  2. そもそも、polyfill
    って何?

    View full-size slide

  3. Web
    開発でいえば、ブラウザが未実装の機能を、導入すること
    で利用できるようにするコードのこと
    ネイティブ実装のように 動くようにしてくれるもののこと
    !=
    代替関数を用意してくれているライブラリ (lodash
    のような
    便利関数の集まりとは違う)
    polyfill
    とは?

    View full-size slide

  4. @babel/polyfill (babel-polyfilll)
    core-js
    regenerator-runtime
    dialog-polyfill (material-design-lite
    で利用)
    raf
    にある polyfill.js (React.js v16
    利用時に必要)
    (
    私が使っている代表的な) polyfill
    ※ dialog-polyfill
    は HTML

    タグを使うためのものです。

    View full-size slide

  5. 最も利用機会が多いのは、
    @babel/polyfill
    だと思うので
    改めて利用方法を
    確認してみましょう

    View full-size slide

  6. Q:
    中身どうなってるの?
    @babel/polyfill

    View full-size slide

  7. A: core-js
    内の shim.js

    regenerator-runtime

    取り込んでいるだけ!!
    @babel/polyfill

    View full-size slide

  8. Q: polyfill
    と Shim
    の違いって何?

    View full-size slide

  9. A: Shim
    は旧環境に新API
    を提供するも

    polyfill
    はShim
    の一種でブラウザ間の
    API
    の差分をなくすもの

    パテみたいなものが語源?
    参考: http://2ality.com/2011/12/shim-vs-polyfill.html

    View full-size slide

  10. Q: @babel/preset-env
    における
    polyfill
    の設定を雰囲気でやっている…
    どうなっているの?

    View full-size slide

  11. .babelrc
    の設定でみるべきは以下の2つ
    1. useBuiltIns
    2. targets.browsers
    // .babelrc
    {
    "presets": [
    ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "targets": {
    "browsers": ["last 2 versions", "safari 7"]
    }
    }]
    ]
    }

    View full-size slide

  12. 1. useBuiltIns

    View full-size slide

  13. “usage” | “entry” | false
    の3
    つの値をとれる
    default
    は false
    どのように polyfill
    を import
    するかが異なる。うまく使うと
    ファイルサイズを減らせる
    browserslist
    から取得した環境に則って、polyfill
    を差し込む
    browserslist
    は後ほど説明する
    .babelrc
    の useBuiltIns

    View full-size slide

  14. 呼んだ各所に呼んだ関数を含むpolyfill
    のimport
    文を挿入する
    ファイルに対して1
    回しか読み込まない
    これが一番よさそう
    import
    文を書かないから混乱する?(polyfill
    ってでも意識し
    ないものだよね?)
    var a = new Promise();

    import "core-js/modules/es6.promise";
    var a = new Promise();
    .babelrc
    の useBuiltIns: "usage"

    View full-size slide

  15. 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"

    View full-size slide

  16. 何もしない
    entry file
    に import “babel/polyfill”
    を書いていれば全
    polyfill
    を読み込む
    import "babel/polyfill";
    .babelrc
    の useBuiltIns: false

    View full-size slide

  17. 2. targets.browsers

    View full-size slide

  18. babel
    を通して使うJavaScript
    コードのサポート対象を指定す
    るパート
    内部的には browserslist
    という npm package
    を利用してい

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

    View full-size slide

  19. 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

    View full-size slide

  20. つまり……

    View full-size slide

  21. ちゃんと指定すると
    無駄な polyfill
    を適用しないで済む
    衝突を気にしなくてよい
    無駄な import
    が減る =
    容量削減!

    View full-size slide

  22. polyfill
    は未実装の機能をnative
    に動くようにしてくれる、便
    利なライブラリ
    polyfill
    は shim
    一種。ブラウザ間のJavaScript
    の機能差異を
    埋めてくれる
    .babelrc
    に useBuildIns
    があるので使うとよさそう
    .babelrc
    に targets.browsers
    があるので使うとよさそう
    雰囲気でなく、あるものちゃんと使っていこう
    まとめ

    View full-size slide