Minimal JS Config for Gutenberg Build Process (no Webpack)

I'm following the tutorial on creating a sidebar for Gutenberg by Zac Gordon, and while the tutorial is great, it lacks of the configuration for the build process. E.g. the code is ES6 with JSX and it needs to be compiled to ES5 to make the browsers understand.

So I find a way to do that. Although there are several configuration available: one from Zac himself, one from create-guten-block, I still want to learn in-depth how to configure and built JS myself. That's the only way I can understand how it work.

Installing Babel

As we need to compile ES6 to ES5, we need Babel to do the job. To install Babel, follow this guide. And because I use command line to compile JS, I select CLI. This is the command:

npm install --save-dev @babel/core @babel/cli

This command installs Babel locally, inside your project folder. However, I develop WordPress themes and plugins all the time, it would be better to install it globally. So, I modified the script to:

npm install -g @babel/core @babel/cli

Installing WordPress preset

Most of the JS code uses WordPress components and JSX syntax. To compile them to ES5, we need to use WordPress preset for Babel. Installing it with the following command:

npm install @wordpress/babel-preset-default --save-dev

Note: I tried to install the package globally (with the same reason as above), it somehow doesn't work for me. So, I have to install it locally.

That's all we need! Only 2 main dependencies, which is so great. We won't be lost in the dependency hell, where we don't know what we actually are using.

Scripts

After installing the dependencies, it's simple to compile the JSX code with the following command:

babel js/*.jsx -d js --presets @wordpress/default

To save time, I set it as a script in the package.json, like this (this is my full package.json)

{
   "scripts": {
     "build": "babel js/*.jsx -d js --presets @wordpress/default"
   },
   "devDependencies": {
     "@wordpress/babel-preset-default": "^4.0.0"
   }
 }

And every time I want to compile the JSX to JS, I just need to run:

npm run build

Note

Somehow when I run the build command for the JS code in the tutorial, I still get the following code in the top of the complied JS file:

import { createElement } from "@wordpress/element";

Of course, this is not ES5. It's the import/export from ES6, which is not understandable for browsers.

So, I make a trick by adding the following line in the source JSX file:

const { createElement } = wp.element;

And run the build command again. The import line is gone and everything works perfectly.

I'm not sure what exactly happens here. If you know about that, please let me know.

Updated:

Looks like 2 syntax above are the same way to use WordPress packages. It's quite well documented here. The 1st one is bundling WordPress packages into our own scripts (which I think is not ideal) and the 2nd one is using them from global wp scope (which is better).

Anyway, hopefully this tutorial helps you save some time configuration Babel for your Gutenberg project, especially when you want to do it by your own. I myself find this way is a good way to learn about modern JS technology.