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
770
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
680
ArrayBufferとBinary
sasurau4
1
540
CLIから見るAngular, React, Vue
sasurau4
1
760
reading-mtc2018-web.pdf
sasurau4
1
460
Other Decks in Technology
See All in Technology
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
SREとその組織類型
tatsuo48
8
1.5k
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする / Table-definitions-for-huge-tables-can-be-modified-by-anyone-safely-and-non-disruptively
freee
1
740
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.4k
ユーザーストーリーのレビューを自動化したみたの
bun913
1
330
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
160
強みを伸ばすキャリアデザイン
yug1224
0
200
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
200
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.9k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
29
46k
KATA
mclloyd
14
12k
In The Pink: A Labor of Love
frogandcode
138
21k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Debugging Ruby Performance
tmm1
70
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
How to name files
jennybc
64
92k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
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は偉大 • 実戦投入の機会はなさそう