UI5 Tooling Transpile

3.11.0 verified Sat Apr 25 auth: no javascript

UI5 CLI extension that provides a middleware and task to transpile JavaScript or TypeScript code to ES5 using Babel. Version 3.11.0, actively maintained by the UI5 community. Supports on-the-fly development server transpilation with sourcemaps for debugging original ES6+/TS sources, and a build task that generates bundled transpiled output including d.ts files for libraries. Configuration-driven via ui5.yaml with support for custom Babel configs, include/exclude patterns, and TypeScript auto-detection via tsconfig.json. Requires @ui5/cli@3.0.0+ and specVersion 3.0.0. Key differentiator: tight integration with UI5's build tooling without modifying the application codebase.

Common errors

error ui5 build -- Error: specVersion "2.0" not supported. Use specVersion "3.0". ↓

cause Legacy ui5.yaml specVersion incompatible with this extension.

fix

Update ui5.yaml: specVersion: "3.0"

error Cannot find module 'ui5-tooling-transpile/middleware' ↓

cause Missing or incorrect dependency installation.

fix

Run 'npm install ui5-tooling-transpile --save-dev' and ensure node_modules contains it.

error Error: Configuration option 'includePatterns' is deprecated. Use 'includes' instead. ↓

cause Using deprecated configuration alias.

fix

Replace 'includePatterns' with 'includes' in ui5.yaml.

error TypeScript transpilation not working, tsconfig.json not found. ↓

cause Automatic TypeScript detection fails without tsconfig.json in root.

fix

Create tsconfig.json in project root or set 'transformTypeScript: true' and provide 'altTsConfig' path.

Warnings

breaking Version 3.x requires @ui5/cli@3.0.0+ and specVersion: "3.0". Version 2.x uses older CLI and specVersion. ↓

fix Upgrade @ui5/cli to >=3.0.0 and set specVersion: "3.0" in ui5.yaml.

deprecated The configuration aliases 'includePatterns' (use 'includes') and 'excludePatterns' (use 'excludes') are deprecated. ↓

fix Use 'includes' and 'excludes' instead of deprecated aliases.

deprecated The configuration option 'transpileTypeScript' is deprecated in favor of 'transformTypeScript'. ↓

fix Use 'transformTypeScript' instead of 'transpileTypeScript'.

gotcha TypeScript detection relies on existence of tsconfig.json in project root. If using an alternate location, set 'altTsConfig' and 'transformTypeScript: true'. ↓

fix Explicitly set 'transformTypeScript: true' and provide 'altTsConfig' path.

gotcha Sourcemaps are inlined. Debug breakpoints in original source will stop at the corresponding transpiled code, not the original source line. ↓

fix Use browser devtools sourcemap support; be aware of mapping offset.

Install

npm install ui5-tooling-transpile

yarn add ui5-tooling-transpile

pnpm add ui5-tooling-transpile

Imports

ui5-tooling-transpile
```
npm install ui5-tooling-transpile --save-dev
```
This is a CLI extension, not a library. Install as dev dependency and configure in ui5.yaml. No JavaScript/TypeScript import needed.

ui5.yaml configuration

wrong

import ui5-tooling-transpile from 'ui5-tooling-transpile'

correct

server:
  customMiddleware:
    - name: ui5-tooling-transpile/middleware
      afterMiddleware: compression
builder:
  customTasks:
    - name: ui5-tooling-transpile/task
      afterTask: replaceVersion

Configure in ui5.yaml, not imported in source code.

specVersion
wrong
```
specVersion: "2.0"
```
correct
```
specVersion: "3.0"
```
Requires specVersion 3.0+ in ui5.yaml.

Quickstart

Installs the package as dev dependency and configures middleware and build task in ui5.yaml for TypeScript transpilation.

npm install ui5-tooling-transpile @ui5/cli --save-dev

# ui5.yaml (specVersion: "3.0")
server:
  customMiddleware:
    - name: ui5-tooling-transpile/middleware
      afterMiddleware: compression
      configuration:
        debug: true
        transformTypeScript: true
        excludes:
          - /lib/
builder:
  customTasks:
    - name: ui5-tooling-transpile/task
      afterTask: replaceVersion
      configuration:
        transformTypeScript: true

echo "Configured. Run 'ui5 serve' or 'ui5 build' to transpile."