Metro Bundler in Web

【第2回】ReactNativeにゆかりのあるスタートアップが集う会

Transcript

1. Metro Bundler in Web by sasurau4 【第2回】ReactNativeにゆかりのあるスタートアップが集う会 at maricuru
2. • Name: Daiki Ihara • ID: @sasurau4 • Job: React Native / Server Side Kotlin / GraphQL • Hobby: React, JavaScript, TypeScript 自己紹介
3. 今日の話題 Metro Bundler in Web
4. What’s Metro Bundler The JavaScript Bundler for React Native • 元々、react-native repositoryが抱えてたが改善のために2017中頃に別repo にしたもの • Webで言うところのWebpackやParcel https://github.com/facebook/metro
5. Metro’s Website
6. Why Metro Bundler in Web
7. 衝撃の事実 • 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
8. やってみた https://github.com/sasurau4/sample-metro-bundler-in-web
9. デモ
10. やってること • expressでstaticなファイルを配信するserverを立てる • expressにmetroをmiddlewareとして組み込む ◦ index.bundle?platform=web&dev=true&minify=false のようなパスでbundleを取得できる • babel.config.jsに設定を書く • index.htmlを書く ◦ scriptタグでbundleを直接指定
11. ハマったこと • bundle scriptをheadタグで読み込んで失敗していた • import/export/fromの構文が、まだTC39のstage-1だった • assetsが取れない（未解決）
12. まとめ • WebでもMetro Bundlerは使える • Webpackは偉大 • 実戦投入の機会はなさそう