Contribute to this page on GitHub

Setting up Babel

When writing scripts for LiquidBounce's ScriptAPI, you are restricted by the fact that Nashorn, the script engine used, only supports JavaScript up to version ES5. In other words, many features that were introduced in newer revisions of the language are not natively supported by the client.

There are two ways of dealing with this situation.

  1. You accept the limitations and actively work around them.
  2. You use a so-called transpiler to adapt modern JavaScript in a way that it can be understood by older script engines.

The latter is certainly the more beautiful variant and to be recommended.

What is Babel?

Babel is essentially a tool that lets you stick a script with modern language features in the front and a version of the same script comes out in the back, but adapted to be compatible with an earlier definition of JavaScript. In reality it can do much more, but this should be enough as a basis for the time being. If you want to learn more about how Babel works, I recommend you check out the respective Wikipedia article.

Setup

Setup is very straightforward. Just follow the steps below and you should be able to use modern JavaScript in LiquidBounce scripts in no time.

  1. Download the latest version of NodeJS and install it on your computer.
  2. Create a new folder in which you want to setup your ScriptAPI project.
  3. Now create a file named package.json in that folder, open it in a text editor and insert the following: 
    {
"name": "scriptapi-transpiler",
"version": "1.0.0",
"description": "Transpiles modern language features to ES5 compliant JavaScript.",
"main": "",
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-dir dist"
},
"author": "CCBlueX",
"license": "MIT",
"devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0"
},
"dependencies": {
    "@babel/polyfill": "^7.8.7"
}
}
  4. Now create another file, name it babel.config.json and paste the following into it: 
    {
"presets": [
    [
        "@babel/env"
    ]
]
}
  5. Now open a console window in the folder (e.g. on Windows CMD) and install all required libraries by running npm install.
  6. Finally create two folders. The first one you name src, the second one dist. Your code goes into the source folder and the transpiled version will land in the dist directory.

Transpiling

Transpiling is very easy. Just once again open a console window in your project folder and run npm run build. Afterwards the transpiled version of your script can be found in the folder named dist. These files are now compatible with LiquidBounce and can be released.

Example code

The following sample code uses modern JavaScript features and normally could not be executed by LiquidBounce. 

const script = registerScript({
    name: "Test",
    version: "1.0.0",
    authors: ["Senk Ju"]
});

script.registerModule({
    name: "BabelModule",
    category: "Misc",
    description: "This module is using modern JavaScript features which have been transpiled to ES5 compliant code."
}, module => {
    var name = "Senk Ju"

    module.on("enable", () => {
        // String interpolation
        Chat.print(`Hello, my name is ${name}!`);

        // Constants
        const array = ["This", "is", "an", "array"];

        // Block-scoped variable
        let axolotl = true;

        // Destructuring
        const [var1, var2, var3, var4] = array;
        chat.print(var1);

        // For-of loop
        for (const element of array) {
            chat.print(element);
        }

        // Arrow functions
        array.filter(element => element.length < 3)
            .forEach(element => {
                chat.print(element.length);
            });
    });
});