Metro Bundler in Web

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は偉大 • 実戦投入の機会はなさそう