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
950
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
750
ArrayBufferとBinary
sasurau4
1
610
CLIから見るAngular, React, Vue
sasurau4
1
910
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
150
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
インフラ寄りSREの生存戦略
sansantech
PRO
9
3.4k
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
890
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
55
22k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
390
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
3
170
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
1k
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
170
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.5k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Applications with DynamoDB
mza
95
6.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Code Reviewing Like a Champion
maltzj
524
40k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Faster Mobile Websites
deanohume
307
31k
Become a Pro
speakerdeck
PRO
29
5.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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は偉大 • 実戦投入の機会はなさそう