Slide 1
Slide 1 text
Metro Bundler in Web
by sasurau4
【第2回】ReactNativeにゆかりのあるスタートアップが集う会 at maricuru
Slide 2
Slide 2 text
● Name: Daiki Ihara
● ID: @sasurau4
● Job: React Native / Server Side Kotlin / GraphQL
● Hobby: React, JavaScript, TypeScript
自己紹介
Slide 3
Slide 3 text
今日の話題
Metro Bundler in Web
Slide 4
Slide 4 text
What’s Metro Bundler
The JavaScript Bundler for React Native
● 元々、react-native repositoryが抱えてたが改善のために2017中頃に別repo
にしたもの
● Webで言うところのWebpackやParcel
https://github.com/facebook/metro
Slide 5
Slide 5 text
Metro’s Website
Slide 6
Slide 6 text
Why Metro Bundler in Web
Slide 7
Slide 7 text
衝撃の事実
● Vincent Riemer: The Creator of
React Native DOM
● Christoph Nakazawa:
Engineering Manager at
Facebook
● Glenn Conner: Tech lead for
web foundation @instagram
https://twitter.com/vincentriemer/stat
us/1088628642970783744?s=20
Slide 8
Slide 8 text
やってみた
https://github.com/sasurau4/sample-metro-bundler-in-web
Slide 9
Slide 9 text
デモ
Slide 10
Slide 10 text
やってること
● expressでstaticなファイルを配信するserverを立てる
● expressにmetroをmiddlewareとして組み込む
○ index.bundle?platform=web&dev=true&minify=false のようなパスでbundleを取得できる
● babel.config.jsに設定を書く
● index.htmlを書く
○ scriptタグでbundleを直接指定
Slide 11
Slide 11 text
ハマったこと
● bundle scriptをheadタグで読み込んで失敗していた
● import/export/fromの構文が、まだTC39のstage-1だった
● assetsが取れない（未解決）
Slide 12
Slide 12 text
まとめ
● WebでもMetro Bundlerは使える
● Webpackは偉大
● 実戦投入の機会はなさそう