Aloe Guvner

Walrus
Veteran
Joined
Sep 28, 2017
Messages
1,628
Reaction score
1,128
First Language
English
Primarily Uses
RMMV
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.)
Code:
$ 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:
Code:
$ 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

Code:
$ npm init

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

Code:
$ npm install babel-cli -D

This will print the version of Babel.js, if there are no errors then it is installed correctly.
Code:
$ babel -V

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

Code:
$ 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.

Code:
$ touch .babelrc

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

Code:
{
 "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:

Code:
“build”: “babel src -d lib”

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

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

7.) Transpile the code!

From the command line, run:
Code:
$ 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!


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.

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


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

Code:
"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!
 

Latest Threads

Latest Posts

Latest Profile Posts


No edits, just gameplay from one area to the next. Plus all my new shiny interface stuff... And I even remember to bolt down the portal so it won't escape this time. :kaopride:
You guys just freely offer up your Autonomy?
I don't know about you, but today the covid frustration is seriously getting to me. Haven't really seen many of my friends for two years, since i moved towns the year before this all started, and well, i miss them :(
so, here's a cute alpacaraptor sketch to heighten the mood:
W7Fhp9n.png
Whenever I start on a new chapter, it doesn't feel like the next episodes, but more like sequels :)
It can be frustrating that so many commercial games have used up titles that might otherwise be great for a project.

Forum statistics

Threads
110,658
Messages
1,055,006
Members
143,786
Latest member
jorgewilliam
Top