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
920
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Technology
See All in Technology
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
130
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
KotlinConf 2025_イベントレポート
sony
1
110
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
740
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
730
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
RailsConf 2023
tenderlove
30
1.2k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Building an army of robots
kneath
306
46k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
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は偉大 • 実戦投入の機会はなさそう