Implementation:MarketSquare Robotframework browser Babel Transpile

Document Type

External Tool Doc -- Documents the use of Babel CLI with the @babel/plugin-transform-modules-commonjs plugin to convert ES2015+ JavaScript modules into CommonJS format compatible with the Browser library's extension system.

Tool Summary

Babel is a JavaScript compiler that transforms modern JavaScript syntax into backward-compatible versions. For Browser library extensions, it converts ES module export/import statements to CommonJS exports/require equivalents while preserving function signatures, default values, and .rfdoc properties.

Source References

File	Lines	Description
docs/examples/babelES2015/babel.config.json	L1-3	Babel configuration file
docs/examples/babelES2015/src/index.js	L1-8	ES2015+ source input
docs/examples/babelES2015/lib/index.js	L1-16	Transpiled CommonJS output

CLI Usage

npx babel src -d lib

This command:

• npx babel -- Runs the Babel CLI from the local node_modules
• src -- Input directory containing ES2015+ source files
• -d lib -- Output directory where transpiled CommonJS files are written

Configuration

The Babel configuration is defined in babel.config.json:

{
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

This minimal configuration activates only the module transformation plugin. No presets are needed because the only transformation required is converting ES modules to CommonJS.

Dependencies

The following npm packages must be installed:

Package	Purpose
@babel/cli	Provides the babel command-line interface
@babel/core	Core Babel compiler, required by all Babel tools
@babel/plugin-transform-modules-commonjs	Transforms ES module syntax to CommonJS

Install with:

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-modules-commonjs

Input Example

The ES2015+ source file docs/examples/babelES2015/src/index.js:

export const funkkari = (argumentti, argu2,
                         argu3=3, // hello
                         huu='hello') => {
  return 123;
}
funkkari.rfdoc = `
Hello from new javascript
`

Key features of this input:

• Uses export const -- ES2015 named export syntax
• Has default parameter values (argu3=3, huu='hello')
• Includes an inline comment in the parameter list
• Attaches a .rfdoc template literal for keyword documentation

Output Example

The transpiled output file docs/examples/babelES2015/lib/index.js:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.funkkari = void 0;

const funkkari = (argumentti, argu2, argu3 = 3, // hello
huu = 'hello') => {
  return 123;
};

exports.funkkari = funkkari;
funkkari.rfdoc = `
Hello from new javascript
`;

Transformation Details

The transpilation performs the following changes:

Aspect	Before (ES2015)	After (CommonJS)
Module declaration	export const funkkari = ...	const funkkari = ...; exports.funkkari = funkkari;
__esModule flag	(implicit)	Object.defineProperty(exports, "__esModule", { value: true })
Strict mode	(implicit in modules)	"use strict"; (explicit)
Forward declaration	(not needed)	exports.funkkari = void 0; (placeholder)

What Is Preserved

• Function signature: (argumentti, argu2, argu3 = 3, huu = 'hello') is unchanged
• Default values: argu3 = 3 and huu = 'hello' remain intact
• The .rfdoc property: funkkari.rfdoc assignment is output after the export, so it attaches to the same function object
• Runtime behavior: The function body (return 123) is unchanged

The void 0 Pattern

Babel emits exports.funkkari = void 0; as a forward declaration before the actual function definition. This ensures the property exists on the exports object even before the function is assigned, which helps with circular dependency resolution. For Browser library extensions (which have no circular dependencies), this is harmless.

Project Structure

A typical project layout for a transpiled extension:

my-extension/
  babel.config.json      # Babel configuration
  package.json           # npm dependencies
  src/
    index.js             # ES2015+ source code
  lib/
    index.js             # Transpiled CommonJS output (generated)

The Browser library import would reference the lib/ output:

*** Settings ***
Library    Browser    jsextension=${CURDIR}/my-extension/lib/index.js

Related

• MarketSquare_Robotframework_browser_ES2015_Module_Transpilation -- Principle document explaining why transpilation is needed
• MarketSquare_Robotframework_browser_Js_Module_Exports_Pattern -- The CommonJS pattern that transpilation produces
• MarketSquare_Robotframework_browser_JavaScript_Module_Authoring -- Full rules for writing extension modules