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
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
250
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
100
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
AWSで始める実践Dagster入門
kitagawaz
1
610
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
490
ガチな登山用デバイスからこんにちは
halka
1
240
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
410
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
540
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Writing Fast Ruby
sferik
628
62k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Automating Front-end Workflow
addyosmani
1370
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Designing for Performance
lara
610
69k
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は偉大 • 実戦投入の機会はなさそう