ES6+ in Cloud Functions for Firebase #2

Babel Boogaloo!

📑 Table of Contents

This post is out of date. Please see my new posts about compiling code.

• Deprecated — ES6 in Cloud Functions for Firebase
• Prior discussion — Babel & preset-env
• Continuing on — Express.js on Cloud Functions for Firebase

Welcome to a series exploring Cloud Functions for Firebase with a modern application stack (React, Apollo, GraphQL, Next.js & Firebase). If you are not familiar with this stack, read on! If you are familiar, checkout the TOC.

ES6+ in Cloud Functions for Firebase with Babel preset-env

My previous post on ES6 in Cloud Functions for Firebase was written quite some time ago. We’ve all grown since then, and so has my knowledge of Babel. Here I’ll cover a more flexible and non-deprecated way of compiling your JavaScript for Firebase using Babel preset-env.

If you’re unfamiliar with Babel and preset-env I highly recommend reading my previous post explaining how it ticks. I wrote it as the resource I wish existed when I was learning.

ES6+ in Cloud Functions

Here’s the code we want to execute in our Cloud Function. It has an ES6 template literal and ES6 lets.

(ignore the ES module syntax for now)

Previously, we used this command with babel-cli to compile down to ES5:

"package-functions": "babel 'functionsES6' --out-dir 'functions' --presets=es2015 --copy-files --ignore 'node_modules'"

The key here was preset=es2015 . This Babel preset compiles ES2015(ES6) into ES5. Our Node runtime is v6.11.5 (at the time of writing), which has 97% feature support for the ES6 specification (according to compat-table). This has two implications:

1. Node v6.11.5 can run 97% of ES6 code, so babel-preset-es2015 is compiling that ES6 into ES5 unnecessarily. We only need to compile the 3% of incompatible code, which we may not have written.
2. babel-preset-es2015 would compile ES6(es2015) to ES5 and babel-preset-es2016 would compile ES7(es2016) to ES6(es2015)” — previous post. Therefore, using only preset-es2015 would not yield ES7, ES8 etc support. You can compose presets, but it’s an unnecessary pain.

preset-env removes the responsibility of knowing the runtime compatibility of your code. You just specify the runtime and it does the hard work of finding the minimum amount of compilation required.

Almost everything runs ES5, why bother?

Babel’s output is the code that will execute, so if you need to debug it, you will be debugging compiled code.

NB: Sourcemaps can be used with Babel, but using them with Cloud Functions is…interesting, so let’s say we don’t have them (in this example we actually don’t).

While Babel’s compiled code is quite readable, it’s certainly not the code you wrote. Ideally, you would want to debug and read the native code you wrote; this is especially the case when using complex new features like async/await and compiling them down to ES5 or ES6.

Babel REPL

The Babel REPL can be used to look at the compiled code output by Babel with the various presets. Let’s take a look at some code now:

1. Our original example with CommonJS Module Syntax instead of the ES Module Syntax:

It removes the template string, the const and lets and converts the arrow function into a regular function. Cool.

2. With ES Module Syntax:

Adding ES module import and export syntax adds some bloat to our code, especially that * namespace import at L23.

3–5. The next 3 examples will use the following code as input. We’re going to play around with some of the presets:

A friendly mix of async/await (CommonJS Module Syntax for brevity).

3. Compiling using preset-es2015 alone:

Wait a moment?! That didn’t compile the async (L25)or await(L26) what’s the deal?!

Well, ES6 didn’t support async/await, and preset-es2015 only compiles ES6 to ES5. When Babel encounters something it doesn’t know how to compile, it leaves it as is.

4. Compiling with preset-es2015, preset-es2016 and preset-es2017 to achieve ES8->ES7->ES6->ES5 compilation.

“package:functions”: “babel firebaseFunctions — out-dir functions — copy-files — ignore firebaseFunctions/node_modules”,

Success! Now it compiles that async/await away! Unfortunately there’s a bunch of bloat within our Cloud Function because of async/await becoming a generator function and then the generator function being compiled to ES5. But Node v6.11.5 has support for generator functions so doesn’t NEED to be compiled.

If only there was a way…

5. Minimally compile for Node versions with preset-env:

Here you can see on L67/68 that a generator function with yield is used instead of async/await. The generator function was completely compiled away with the last example, but not this time! You can also see that our template string, lets and consts are not compiled away. Super!

Try copying the ‘input’ code from these gists and play with the presets in the REPL yourself.

Using preset-env with Cloud Functions

The key changes we need to make to add preset-env are:

1. add preset-env:

yarn add @babel/preset-env @babel/cli -D

2. create a .babelrc file in the root of the project with the following contents:

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "6.11.5"
      }
    }]
  ]
}

3. update our code base so the folder structure looks like this:

package.json
src/.babelrc
src/functions/index.js - from - firebaseFunctions/index.js

4. update our npm scripts (removing the preset= part of the Babel script means the CLI will look for our .babelrc file):

"build-funcs": "babel src/functions --out-dir dist/functions",

Read my previous post for a broad look at using preset-env. If you already understand at a high level I highly recommend that you RTFM 😄.

For a complete example repository using preset-env for transpiling a Cloud Function with async/await, check out this repo:

jthegedus/firebase-gcp-examples

Conclusion

Apologies for espousing preset-es2015, I wasn’t aware it was so close to deprecation. Please use preset-env. Target your environment, compile only what you need to, and ship as much native code as possible.

Need something else to read?

More on ES features and Babel:

• preset-env Docs by Babel and Contributors
• ES Module Syntax in NodeJS by James M Snell
• ES Module Syntax Mozilla Docs by Mozilla and Contributors
• Async/Await and Generator Functions by Mozilla and Contributors

More by me:

• GraphQL Server on Cloud Functions for Firebase
  The smoothest GraphQL on FaaS DX to date!
• Next.js on Cloud Functions for Firebase with Firebase Hosting
  SSR with Clean URLs
• Table of Contents
  An index post for my Medium Series

If you found this useful, please recommend and share with your friends & colleagues.