How to run ES6 and npm deps in Rhino

You can bundle your JS into a single file and convert it to JS 5.

Solution: Babel supports JS syntax conversion. core-js polyfills fill in missing ES6 features. Browserify supports bundling up a dependency tree (including npm dependencies) into a single standalone file.

The Details: Easier said than done. Read on for a step-by-step guide.

1. Create a "bundler" directory. Later on, we will put mymodule.js in it, but let's hold off on that.

2. cd into your bundler directory and run npm init to create a package.json file.

3. Add your build command to the "scripts" section of package.json

:

"build": "browserify mymodule.js -t babelify --standalone mymodule -o bundle.js"

browserify mymodule.js means that browserify is going to bundle up mymodule.js and all its dependencies. -t babelify means that babel will transpile the code, converting ES6 things to 5. --standalone mymodule means that the things your module exports via module.exports will be preserved. -o bundle.js means that the output file will be bundle.js. You'll want to rename this file back to your module's name when you add it to Rhino.

4. Create the babel config file babel.config.js

:

module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "entry",
        corejs: 3,
      }
    ],
  ];

  const plugins = [];

  return {
    presets,
    plugins
  };
};

The newest version of corejs is currently 3, but use a newer version if there is one. The useBuiltins can be "usage" instead, which may be better depending on your situation.

5. Install things

:

npm install --global browserify
npm install --save-dev babelify @babel/core @babel/preset-env
npm install core-js

This completes the setup of your "bundler", per se. You can save what you have so far for future use. The following steps now show how to use this bundler on one of your modules...

6. Put your module file (let's call it mymodule.js) and all of its dependencies into the bundler directory. This includes running npm install ... to install all of mymodule.js's npm dependencies.

7. Add the line

:

import "core-js/stable";

to the top of mymodule.js. This imports the needed polyfills. To reduce the filesize, you can import the specific JS features that your module (and its dependencies) actually use. For example, import "core-js/stable/number/is-nan"; to import the isNaN method on the Number class. It may be difficult though to know what you specifically use. That's why the "usage" option in tandem with browserslist may be the best way to slim. See core-js for more.

For example, your file may look like:

import "core-js/stable";
import mylib from "my-3rd-party-lib";

module.exports = mylib;

if it is nothing more than a 3rd party library that you want to use in Rhino. If it's a module you wrote yourself, then there will be a bunch of code between the core-js import at the top and the module.exports at the bottom.

8. Finally, run the build command you wrote in step 4

:

npm run build

You should now have a file called bundle.js. You should be able to copy that file into the place where the Rhino engine will find it, and it should work.

cp bundle.js /path/to/where/to/place/dist/file/mymodule.js

Happy coding.