Transpiling ES6-based SAP UI5 code to traditional JavaScript code using Babel

I have the following ES6 based SAP UI5 code, written in JavaScript:

import UIComponent from "sap/ui/core/UIComponent";
/**
 * @namespace ui5.typescript.helloworld
 */
export default class Component extends UIComponent {
    multiply(x, y) {
        return x * y;
    }
}

It can be seen that there are still many ES6-based syntaxes, such as keywords such as class, extends, etc.

Next we use a tool to convert this code into traditional JavaScript code.

Add dependencies using the following command line:

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save-dev @babel/preset-typescript babel-preset-transform-ui5

Create a new file .babelrc.json in the root directory of the ui5 project. This file tells babel the specific tasks that need to be performed.

{
    "ignore": [
        "**/*.d.ts"
    ],
    "presets": [
        "transform-ui5",
        "@babel/preset-typescript"
    ]
}

Use the following command line to trigger a babel build:

npx babel src --out-dir webapp --extensions ".ts,.js"

We need to explicitly allow *.ts files because Babel doesn't handle TypeScript files by default.

The result is a webapp folder with a Component.js file converted from TypeScript and also converted to classic UI5 code.

Open this file to see: the module import is replaced by the classic sap.ui.define(...) and the "Component" class is now defined by calling UIComponent.extend(...):

sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
  /**
   * @namespace ui5.typescript.helloworld
   */
  const Component = UIComponent.extend("ui5.typescript.helloworld.Component", {
    multiply: function _multiply(x, y) {
      return x * y;
    }
  });
  return Component;
});

While not strictly required, it makes sense to use a linter to inspect our code. The popular "ESLint" tool also understands TypeScript when some plugins are added. It is the recommended tool for lint TypeScript code.

So let's add ESLint and these plugins as development dependencies.

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint needs to be told which plugins to use and which JavaScript language level the code should have, so create a .eslintrc.json file in the project root with the following settings:

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": ["./tsconfig.json"],
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ]
}

The command line npx eslint can now be executed for syntax checking:

npx eslint

There shouldn't be any output here (meaning: no errors), but if we introduce a syntax error to Component.ts, the check will report an error, such as a missing return type for the "multiply" function, and it will display a warning.

Now we can develop TypeScript-based SAP UI5 in the src folder.

• npx tsc
• npx babel src --out-dir webapp --extensions ".ts,.js"

Finally install the SAP UI5 cli tool to deploy and start this SAP UI5 application:

npm install --save-dev @ui5/cli

Create a new ui5.yaml file and maintain the following contents:

specVersion: "2.3"
metadata:
  name: ui5.typescript.helloworld
type: application
framework:
  name: OpenUI5
  version: "1.97.0"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.ui.unified
    - name: themelib_sap_fiori_3

Do the final build:

npx babel src --out-dir webapp --source-maps true --extensions \".ts,.js\" --copy-files

npx ui5 serve -o index.html

A little explanation of some parameters of the npx babel command.

--source-maps true: Add raw TypeScript source code to *.js.map files next to transpiled JavaScript files, and add pointers to these .map files to the end of JS files. Browsers understand this, so they can enable single-stepping of raw TypeScript code in the debugger even though they are actually running compiled JavaScript code in the background. Note that this describes the transpiled output in the webapp directory; optimizing UI5 builds into the dist directory removes these source maps.

--copy-files ensures that non-TypeScript files are also copied from "src" to "webapp", eg view XML files.

Successful start:

More Jerry's original articles, all in: "Wang Zixi":