ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

今さら人に聞けないnpmでFirebaseをインストールする方法

Firebaseを使うにあたり通常であれば

<!-- Firebase App is always required and must be first -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>

<!-- Add additional services that you want to use -->
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-functions.js"></script>

<!-- Comment out (or don't include) services that you don't want to use -->
<!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-storage.js"></script> -->

<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

という記述をしてjsとHTMLのコーディングを行うのだが、scriptタグがたくさんあるとその都度、ブラウザがHTMLのダウンロードを停止してしまいパフォーマンス上よくない。

JSのダウンロードに関するブラウザのレンダリング停止については、下記の書籍が詳しい。 www.amazon.co.jp

そこで、webpackを使ってFireabseを実行するJSとFarebase自体のJSを一つにすればパフォーマンスが上がるのではないという仮説の元、まずは、npmでFirebaseをインストールする方法を今さらながら調べてみた。

検索してみると以下のコマンドでFirebaseをインストールすることはできた。

npm install --save firebase

ただこれだけだとHostingができないので、下記コマンドのようにターミナルで実行してツールをインストールする必要がある。

npm install -g firebase-tools

2個コマンドうつ必要があり、若干、めんどくさいのだが、しょうがない。