In this example, we'll use ES6 / ES2015 JavaScript in a mod.

1. Set your mod to Babel mode

Select Babel from the JS panel dropdown:

TIP

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript.

2. Add some HTML

Add some HTML to the mod. For this example, add some basic text with an id of message:

<div id="message">
  Hello, World!
</div>
1
2
3

3. Add some ES6 JavaScript

Add the JS below to your mod. A few features of ES6 / ES2015 highlighted here are:

  • Line 1: let assignment, similar to var in earlier JS versions
  • Line 3: const assignment, used for one-time assignment when a variable's value will not change
  • Line 6: String literal syntax (using ` instead of " or ') with a variable inserted using ${}
  • Line 12: Arrow operator => used in place of function syntax
let messageEl = document.getElementById('message')

const itemsToAdd = [
  10,
  22,
  `This mod is ${mod.key}`
]

/* 
 * Loop over itemsToAdd and add a div for each item 
 */
itemsToAdd.map(item => {
  let newDiv = document.createElement('div')
  newDiv.innerHTML = item
  messageEl.append(newDiv)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

TIP

This is only a subset of ES6 / ES2015 features. You can learn more here

4. Result

Saving the mod will reload its preview, which should look like:

Hello, World!
10
22
This mod is bkkan

Babel has pre-compiled the above ES6 / ES2015 JavaScript into "regular" ES5 JavaScript as shown below, and this JavaScript is what ultimately runs in the browser when the mod is loaded:

"use strict";
var messageEl = document.getElementById("message");
var itemsToAdd = [
  10,
  22,
  "This mod is ".concat(mod.key)
];

/*
 * Loop over itemsToAdd and add a div for each item
 */
itemsToAdd.map(function(item){
  var newDiv = document.createElement("div");
  newDiv.innerHTML = item;
  messageEl.append(newDiv);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

In this way, you can use new features of ES6 / ES2015 JavaScript while still maintaining backwards compatibility for mods viewed in older browsers.

Last Updated: 8/22/2018, 2:47:45 AM