How to Transpile ES6 Javascript to ES5 for older versions of MV

[Aloe Guvner]

Topic: Transpile Javascript code written with ES6 features into code compatible for older browsers and versions of MV prior to 1.6.0 using Babel.js

Intended Audience: Plugin Developers

Description: RPG Maker MV v1.6.0 and later now come with an updated version of NW.js. What does this mean, practically?

It means that we can now enjoy a modern browser experience, and can use Javascript code with new features from the ECMAScript2015 specification (commonly known as ES6). I highly recommend using the ES6 features, as they will make your code easier to write and easier to read.

However, some RPG Maker users may not have upgraded to v1.6.0+ or some games might be deployed to the web and accessed by people with non-modern browsers (looking at you, Internet Explorer).

With Babel.js, we can get the best of both world - develop plugins with the most up-to-date features, but still retain backwards compatibility with older versions.

Requirements: A text editor and minimal knowledge of the command line (don’t worry, I will walk you through it).


Tutorial:

1.) Verify or install command line / bash

Let’s take a moment to verify that we have a proper command line.

Windows:
I recommend Git Bash, download here.

Mac:
The default shell of the Terminal is Bash, so no installation required.
How to open the Terminal on a Mac.

Linux:
I believe that there is a Terminal that runs Bash by default similar to Mac.
I've never owned a Linux, so I have no idea, but I think that if you use a Linux you'll be savvy enough to figure out how to open it.

2.) Install npm

Install Node Package Manager (npm) onto your computer. It comes bundled with Node.js, the download link can be found here. Open Git Bash or the Terminal (depending on your OS), and execute the following command to ensure that npm is installed.

(Note that the $ symbol just means the start of the line, your symbol may be different depending on your terminal.)

$ npm -v

This will print the version of npm, if there are no errors then it is installed correctly.

3.) Create your development directory

I recommend creating a new folder for plugin development

Why would you avoid developing directly in your game’s js/plugins folder?

• If you are in-process of working on new features of your plugin, you can still work/test your game with a stable version of your plugin
• Single location to accumulate useful tools across all of your projects
• The only downside is having to copy the plugin from your development folder to your game folder… which can be automated! I will show you how at the bottom.

In my case, I created a folder called:
C:\Users\me\Documents\RPGMakerMV\PluginDevelopment

For the rest of the tutorial, this folder is known as your “root” directory.
Create two folders under your root directory called “src” and “lib”.
"src" is your source code, and is where you will be working on your plugins. "lib" will hold the transpiled output that can be shared with others or used in your game deployment (if needed).

4.) Install Babel.js

4a.) In the terminal, navigate to your plugin development folder. In Windows, you can actually right-click on the folder and select “Git Bash Here” which will open bash already navigated to that directory. This might be possible on Mac/Linux also.

If not, use the command “cd” to navigate to your directory. In my case:

$ cd Documents\RPGMakerMV\PluginDevelopment

Note: This entire tutorial takes place in your plugin development directory. All commands listed assume that the terminal is opened in this directory. After step 4a, we don't change directories.

4b.) Initialize npm in your root directory

$ npm init

4c.) Install the Babel Command Line Interface (CLI) as a development dependency

$ npm install babel-cli -D

This will print the version of Babel.js, if there are no errors then it is installed correctly.

$ babel -V

4d.) Install the Babel presets. This is the library that allows code to be transpiled from one specification to another.

$ npm install babel-preset-env -D

5.) Configuring Babel

Babel needs to know which specifications you are using to transpile it backwards. It’s easier just to tell Babel that we’re using all modern specifications rather than describe each one.

5a.) Create a .babelrc file in the root directory.

$ touch .babelrc

5b.) In a text editor, add the following code to the .babelrc file:

{
 "presets": ["env"]
}

6.) Setting up automation


6a.) After you initialized npm in the root directory, a “package.json” file was created. Go ahead and open this in a text editor.


6b.) Find the “scripts” property.
Add this property into the “scripts” object:

“build”: “babel src -d lib”

The “scripts” part will look something like this now:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "babel src -d lib"
 },

7.) Transpile the code!

From the command line, run:

$ npm run build

This will transpile all files in your “src” directory from modern Javascript to ES5-compatible Javascript in your “lib” directory. All done!

Spoiler: ”Bonus: Automate file copy”

The transpiled code gets put into the “lib” folder of your development directory. But then you would have to copy it into your project in order to test it.
We can automate this!
Using the “cp” command, and knowing that “.” refers to the current directory and “..” refers to the level above the current directory.

Here is an example that copies ‘plugin_name.js’ from the ‘src’ folder into my project plugin folder.

cp ./src/plugin_name.js ../Project/MyProject/js/plugins

So my package.json "scripts" section would look something like this:

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "babel src -d lib && cp ./src/plugin_name.js ../Project/MyProject/js/plugins"
 },

When I use ‘npm run build’ , it will transpile my file and automatically copy it into my project for testing!