Louis Coulet
Louis Coulet

Reputation: 4621

How to access Firebase types without importing firebase module?

In my webapp I use Firebase from the CDN in order to limit the amount of data transfer from my account, as shown here. By using external scripts from the CDN, I do not have to bundle firebase module with my code, so my bundle is smaller.

Now my issue is that I would like to use the types provided by firebase when I write code for my webapp in typescript. How can I achieve that without importing the firebase module?

Upvotes: 0

Views: 973

Answers (1)

Louis Coulet
Louis Coulet

Reputation: 4621

I found a solution: I can import the firebase module, use it during typescript compilation, and finally exclude it from my bundle through webpack externals config:

In my html code:

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-firestore.js"></script>
<script src="bundle.js"></script>

In my typescript code:

import firebase from "firebase";

firebase.initializeApp(...

In webpack.config.js:

externals: ["firebase"],

I have verified that my bundle is much slimmer: from 139kB to 53kB.

Upvotes: 2

Related Questions