Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
@babel/polyfill 再確認
Search
muryoimpl
January 24, 2018
Technology
1
1.4k
@babel/polyfill 再確認
2018/01/24(水) に弊社 コワーキングにて開催されたカレンダー配布回でぐだったLTです
muryoimpl
January 24, 2018
Tweet
Share
More Decks by muryoimpl
See All by muryoimpl
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
1.2k
Kanazawa.rb LT大会用/kzlt コマンドの説明 2024/01版
muryoimpl
0
2.9k
kzltコマンドの新たなソリューションについて
muryoimpl
0
2.9k
俺とTODOアプリ~Linearの変~
muryoimpl
0
2.3k
POSIX文字クラスでの躓き
muryoimpl
0
2.2k
/kzlt コマンドとは
muryoimpl
0
940
meetup.kzrb.org の更新を考える 事前激闘編
muryoimpl
0
1.5k
meetup.kzrb.org の更新を 考える ゆるふわ編
muryoimpl
0
1.5k
最近のデスク周りの diff / kzrb meetup#108-2
muryoimpl
0
31
Other Decks in Technology
See All in Technology
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
0
130
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
240
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
140
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
390
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
460
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
2k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Statistics for Hackers
jakevdp
799
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Become a Pro
speakerdeck
PRO
29
5.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Practical Orchestrator
shlominoach
189
11k
Transcript
@babel/polyfill 再確認 2018 アジャイル事業部 年始のご挨拶 2 月担当: muryoimpl ( 無量井
健)
None
そもそも、polyfill って何?
Web 開発でいえば、ブラウザが未実装の機能を、導入すること で利用できるようにするコードのこと ネイティブ実装のように 動くようにしてくれるもののこと != 代替関数を用意してくれているライブラリ (lodash のような 便利関数の集まりとは違う)
polyfill とは?
@babel/polyfill (babel-polyfilll) core-js regenerator-runtime dialog-polyfill (material-design-lite で利用) raf にある polyfill.js
(React.js v16 利用時に必要) ( 私が使っている代表的な) polyfill ※ dialog-polyfill は HTML の <dialog> タグを使うためのものです。
最も利用機会が多いのは、 @babel/polyfill だと思うので 改めて利用方法を 確認してみましょう
Q: 中身どうなってるの? @babel/polyfill
A: core-js 内の shim.js と regenerator-runtime を 取り込んでいるだけ!! @babel/polyfill
None
Q: polyfill と Shim の違いって何? <!--[if lt IE 9]> <script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif]-->
A: Shim は旧環境に新API を提供するも の polyfill はShim の一種でブラウザ間の API の差分をなくすもの
※ パテみたいなものが語源? 参考: http://2ality.com/2011/12/shim-vs-polyfill.html
None
Q: @babel/preset-env における polyfill の設定を雰囲気でやっている… どうなっているの?
.babelrc の設定でみるべきは以下の2つ 1. useBuiltIns 2. targets.browsers // .babelrc { "presets":
[ ["@babel/preset-env", { "useBuiltIns": "usage", "targets": { "browsers": ["last 2 versions", "safari 7"] } }] ] }
1. useBuiltIns
“usage” | “entry” | false の3 つの値をとれる default は false
どのように polyfill を import するかが異なる。うまく使うと ファイルサイズを減らせる browserslist から取得した環境に則って、polyfill を差し込む browserslist は後ほど説明する .babelrc の useBuiltIns
呼んだ各所に呼んだ関数を含むpolyfill のimport 文を挿入する ファイルに対して1 回しか読み込まない これが一番よさそう import 文を書かないから混乱する?(polyfill ってでも意識し ないものだよね?)
var a = new Promise(); ↓ import "core-js/modules/es6.promise"; var a = new Promise(); .babelrc の useBuiltIns: "usage"
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"
何もしない entry file に import “babel/polyfill” を書いていれば全 polyfill を読み込む import
"babel/polyfill"; .babelrc の useBuiltIns: false
2. targets.browsers
babel を通して使うJavaScript コードのサポート対象を指定す るパート 内部的には browserslist という npm package を利用してい
る browserslist は、クエリをparse して caniuse-lite のデータを 元に対応ブラウザの情報を生成する caniuse-lite は caiuse のデータを元にしている caniuse は https://caniuse.com/ のデータを使っている模様 ここで取得した情報と、preset-env/data の情報をつきあわせ て対象ブラウザに polyfill が必要かどうかを判断している .babelrc の targets.browsers
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
None
つまり……
ちゃんと指定すると 無駄な polyfill を適用しないで済む 衝突を気にしなくてよい 無駄な import が減る = 容量削減!
まとめ
polyfill は未実装の機能をnative に動くようにしてくれる、便 利なライブラリ polyfill は shim 一種。ブラウザ間のJavaScript の機能差異を 埋めてくれる
.babelrc に useBuildIns があるので使うとよさそう .babelrc に targets.browsers があるので使うとよさそう 雰囲気でなく、あるものちゃんと使っていこう まとめ