Metro Bundler in Web

A32ef72a6a594abcf40c64154b968da6?s=47 Daiki Ihara
February 21, 2019

Metro Bundler in Web

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

A32ef72a6a594abcf40c64154b968da6?s=128

Daiki Ihara

February 21, 2019
Tweet

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