Exciting release!Introducing "safe npm". Learn more
Log inDemoInstall


Package Overview
File Explorer

Advanced tools


UI5 tooling extensions to transpile code


Version published
Weekly downloads
decreased by-2.23%

Weekly downloads



UI5 Tooling Extensions for JS/TS transpiling

DISCLAIMER: This is a community project and there is no official support for this package! Also the functionality may stop working at any time in future with newer versions of the UI5 tooling!


npm install ui5-tooling-transpile --save-dev

Configuration options (in $yourapp/ui5.yaml)

  • debug: true|false
    enable basic logging

  • verbose: true|false
    enable verbose logging

  • babelConfig: Object object to use as configuration for babel instead of the babel configuration from the file system (as described at Babel config files), or the default configuration defined in this middleware (just using the @babel/preset-env)

  • includes: String<Array> (old alias: includePatterns) array of paths your application to include in transpilation, e.g. /modern-stuff/

  • excludes: String<Array> (old alias: excludePatterns) array of paths your application to exclude from transpilation, e.g. 3-rd party libs in /lib/

  • filePattern: String source file pattern for the resources to transpile, defaults to .js; to handle multiple file extensions you can specify the extensions like that: .+(js|jsx) or .+(ts|tsx)

  • transpileTypeScript: true|false flag is only supported if no filePattern is provided; flag to set the value of filePattern to either .ts if true (transpiling TypeScript) or .js if false

  • transpileDependencies: true|false if option is enabled, the tooling extensions also transpile the TypeScript sources from the dependencies (experimental feature)

  • transpileAsync: true|false
    flag is only supported if no babelConfig is provided; transpiling async/await using this Babel plugin, which doesn't require the regenerator runtime (Issue #242)

  • removeConsoleStatements: true|false
    flag is only supported if no babelConfig is provided; removes console statements while transpiling using Babel plugin

  • generateDts: true|false if option is enabled, the tooling extension will generate the d.ts files (for projects of type library this option is considered as true (enabled) by default and for other projects such as application this option is considered as false (disabled) by default)


  1. Define the dependency in $yourapp/package.json:
"devDependencies": { // ... "ui5-tooling-transpile": "*" // ... }, "ui5": { "dependencies": [ // ... "ui5-tooling-transpile", // ... ] }

As the devDependencies are not recognized by the UI5 tooling, they need to be listed in the ui5 > dependencies array. In addition, once using the ui5 > dependencies array you need to list all UI5 tooling relevant dependencies.

  1. Configure it in $yourapp/ui5.yaml:

The configuration for the custom task:

builder: customTasks: - name: ui5-tooling-transpile-task afterTask: replaceVersion configuration: debug: true removeConsoleStatements: true transpileAsync: true excludePatterns: - "lib/" - "another/dir/in/webapp" - "yet/another/dir"

The configuration for the custom middleware:

server: customMiddleware: - name: ui5-tooling-transpile-middleware afterMiddleware: compression configuration: debug: true transpileAsync: true excludePatterns: - "lib/" - "another/dir/in/webapp" - "yet/another/dir"

How it works

The custom middleware handles all requests to .js-files. The file is then transpiled on-the-fly via babel, including dynamic creation of sourcemaps.

The transpiled code and the sourcemap are subsequently delivered to the client instead of the original .js/.ts-file. Because of the sourcemap, setting breakpoints in the original (ES6+) source will cause the debugger to stop when the corresponding transpiled source code is reached.

async/await is transpiled at runtime, but the required asyncGenerator sources are not yet delivered on the fly. They need to be sap.ui.required or <script src="...">d separately. Alternatively you can use the option transpileAsync which transpiles the async/await into Promises.

By default the tooling extensions can be used to transpile ES6+ JavaScript ot Typescript code to ES5 by using babel. By enabling the option transpileTypeScript the tooling extensions can be used to transpile your TypeScript sources into JavaScript.

How to obtain support

Please use the GitHub bug tracking system to post questions, bug reports or to create pull requests.


Any type of contribution (code contributions, pull requests, issues) to this showcase will be equally appreciated.


This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0 but finally you can choose between one of them if you use this work.

When you like this stuff, buy @vobu a beer or buy @pmuessig a coke when you see them.


Last updated on 20 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
support@socket.devSocket SOC 2 Logo


  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc