How to setup Babel

Introduction

If you write scripts for LiquidBounces ScriptAPI, you are limited by the fact that the Nashorn JavaScript engine in Java 8 only offers support up to ES5. For this reason, many features introduced in newer definitions of JavaScript simply do not exist here.

Now there are two main ways to deal with this problem:

1. The use of so-called polyfill functions, which introduce support for missing features.
2. Transpiling from modern JavaScript (e.g. ES7) to the latest supported definition (ES5).

Thereby possibility two is the simpler and more flexible one. In the following you will learn how to use Babel to make LiquidBounce understand scripts with modern syntax.

What is Babel?

Babel is popular tool for using the newest features of the JavaScript programming language. As a transpiler, or source-to-source compiler, developers can program using new ECMAScript 6 (ES6) language features by using Babel to convert their source code into versions of JavaScript that evolving browsers are able to process. (Wikipedia)

Setup (Video)

1. Download the latest version of NodeJS, install it on your system and reboot your computer.
2. Create a new folder for your script project and open a terminal in it (e.g. CMD on Windows).
3. A new NodeJS project must first be initiated in this folder. This can be done with the following command: npm init. Which data you want to specify in the following is up to you.
4. Run the following command to install Babel using the NodeJS Packge Manager (NPM): npm install -D babel-cli
5. Create two more folders within your project folder. One must be called in, the other out. The first one will later contain your script files with modern syntax, the other one what Babel makes of it and what LiquidBounce can understand.
6. Babel itself can do little. So that it can be used to transpile from modern JavaScript to old, the necessary plugins and presets must first be installed. Therefore the following command must be executed: npm install -D babel-preset-env.
7. The next step is to create a configuration file named .babelrc in the project folder. Open it and add the following text to it:

{
 "presets": ["env"] 
} 

8. Last but not least we should add a script in the package.json file to start the transpiling process. Just add the following lines to the file:

...

"scripts": {
  "build": "babel in -d out",
},

...

That's all!

Now write your code in the in folder. When you want to test your script, simply run npm run build in the project folder to convert your modern code to something LiquidBounce understands. The transpiled code will then be in the "out" folder and can be copied directly into LiquidBounce's Scripts folder.