今さら人に聞けない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個コマンドうつ必要があり、若干、めんどくさいのだが、しょうがない。