babel-ui5-module-formatter

0.0.1 verified Fri May 01 auth: no javascript

A Babel plugin that transforms ES6 module syntax into sap.ui.define AMD-style calls for SAPUI5/OpenUI5 applications. Version 0.0.1 is an initial release with no recent updates. It fills the gap between modern JavaScript modules and UI5's legacy AMD module system, enabling developers to write ES6 code and compile it for UI5. Unlike standard Babel module transforms, this plugin targets SAP's specific define pattern.

Common errors

error Error: Plugin babel-ui5-module-formatter: Unknown option 'moduleName'. ↓

cause The option name is incorrect or the plugin version doesn't support it.

fix

Use correct option name as per documentation (currently undocumented; avoid options or check source code).

error TypeError: Cannot read property 'replace' of undefined ↓

cause The plugin expects specific AST node types that may not exist if other babel transforms run after it.

fix

Ensure babel-ui5-module-formatter is the last plugin in the plugins array.

Warnings

gotcha Plugin must be placed after @babel/plugin-transform-modules-commonjs or similar module transform to work correctly. ↓

fix Ensure other module transforms are not conflicting; this plugin replaces the standard module transform for UI5.

deprecated Babel 6 presets and plugins are deprecated; this plugin may not be compatible with Babel 7+. ↓

fix Check if the plugin supports Babel 7; consider using @ui5/builder or ui5-loader as alternatives.

gotcha The plugin does not handle dynamic imports (import()) correctly and may throw errors. ↓

fix Avoid dynamic imports in UI5 projects, or use a different module bundler like ui5-tooling.

gotcha Options like 'moduleName' are undocumented; the plugin may require specific module name format. ↓

fix Use with default options first; refer to example project for guidance.

Install

npm install babel-ui5-module-formatter

yarn add babel-ui5-module-formatter

pnpm add babel-ui5-module-formatter

Imports

default

wrong

const formatter = require('babel-ui5-module-formatter');

correct

import formatter from 'babel-ui5-module-formatter';

The package likely exposes a Babel plugin; using default import is recommended.

default

wrong

plugins: ['babel-ui5-module-formatter']

correct

plugins: [['babel-ui5-module-formatter', { /* options */ }]]

In Babel config, use array syntax to pass options, not just the string.

default

wrong

module.exports = { plugins: ['babel-ui5-module-formatter'] };

correct

module.exports = { plugins: [['babel-ui5-module-formatter', { /* options */ }]] };

CommonJS require for Babel config; options object should be passed as second element in array.

Quickstart

Shows installation, Babel config with plugin options, and a minimal ES6 module transformation to sap.ui.define.

// Install: npm install --save-dev babel-ui5-module-formatter
// In .babelrc or babel.config.js:
{
  "plugins": [
    ["babel-ui5-module-formatter", {
      "moduleName": "my/module/name"
    }]
  ]
}
// Input ES6:
import { helper } from './helper';
export default class MyClass {}
// Output AMD:
sap.ui.define(['./helper'], function(helper) {
  'use strict';
  return function() {
    // class definition
  };
});