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
Metro Bundler in Web
Search
Daiki Ihara
February 21, 2019
Technology
0
960
Metro Bundler in Web
【第2回】ReactNativeにゆかりのあるスタートアップが集う会
Daiki Ihara
February 21, 2019
Tweet
Share
More Decks by Daiki Ihara
See All by Daiki Ihara
tc39_study
sasurau4
1
760
ArrayBufferとBinary
sasurau4
1
620
CLIから見るAngular, React, Vue
sasurau4
1
930
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
250
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
260
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
150
WEBサービスを成り立たせるAWSサービス
takano0131
1
180
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
310
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
170
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
300
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The Pragmatic Product Professional
lauravandoore
36
6.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Experiences People Love
moore
142
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Transcript
Metro Bundler in Web by sasurau4 【第2回】ReactNativeにゆかりのあるスタートアップが集う会 at maricuru
• Name: Daiki Ihara • ID: @sasurau4 • Job: React
Native / Server Side Kotlin / GraphQL • Hobby: React, JavaScript, TypeScript 自己紹介
今日の話題 Metro Bundler in Web
What’s Metro Bundler The JavaScript Bundler for React Native •
元々、react-native repositoryが抱えてたが改善のために2017中頃に別repo にしたもの • Webで言うところのWebpackやParcel https://github.com/facebook/metro
Metro’s Website
Why Metro Bundler in Web
衝撃の事実 • 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
やってみた https://github.com/sasurau4/sample-metro-bundler-in-web
デモ
やってること • expressでstaticなファイルを配信するserverを立てる • expressにmetroをmiddlewareとして組み込む ◦ index.bundle?platform=web&dev=true&minify=false のようなパスでbundleを取得できる • babel.config.jsに設定を書く
• index.htmlを書く ◦ scriptタグでbundleを直接指定
ハマったこと • bundle scriptをheadタグで読み込んで失敗していた • import/export/fromの構文が、まだTC39のstage-1だった • assetsが取れない(未解決)
まとめ • WebでもMetro Bundlerは使える • Webpackは偉大 • 実戦投入の機会はなさそう