0.4.1 • Public • Published

    UI5 middleware for live transpiling ES6+ sources

    Middleware for ui5-server, doing on-the-fly transpilation of ES6+ sources to ES5 (incl IE11 compatability :) )


    npm install ui5-middleware-livetranspile --save-dev

    Configuration options (in $yourapp/ui5.yaml)

    • debug: true|false
      verbose logging

    • excludePatterns: String<Array>
      array of paths inside $yourapp/webapp/ to exclude from live transpilation,
      e.g. 3-rd party libs in lib/*

    • transpileAsync: true|false
      transpiling async/await using this Babel plugin, which doesn't require
      the regenerator runtime (Issue #242)

    • babelConfig: Object
      object to use as configuration for babel instead of the default configuration
      defined in this middleware


    1. Define the dependency in $yourapp/package.json:
    "devDependencies": {
        // ...
        "ui5-middleware-livetranspile": "*"
        // ...
    "ui5": {
      "dependencies": [
        // ...
        // ...

    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:
      - name: ui5-middleware-livetranspile
        afterMiddleware: compression
          debug: true
          transpileAsync: true
          - "lib/"
          - "another/dir/in/webapp"
          - "yet/another/dir"

    How it works

    The middleware intercepts every .js-file before it is sent to the client. The file is then transpiled on-the-fly via babel, including dynamic creation of a sourcemap.

    The transpiled code and the sourcemap are subsequently delivered to the client instead of the original .js-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 babel plugin babel-plugin-transform-async-to-promises as described here.

    Extending the default configuration (in $yourapp/babel.config.json)

    If you want to further customize the transpiling options you can do so by creating a babel config file babel.config.json in your project directory. The behavior is identical to that of ui5-task-transpile. For more details and examples consult the documentation of ui5-task-transpile.

    Override babel configuration (in $yourapp/ui5.yaml)

    You can override the default babel configuration from this package by including an object babelConfig in this task's configuration. The behavior is identical to that of ui5-task-transpile. For more details and examples consult the documentation of ui5-task-transpile.


    .js-files requested by the server that are missing in the application (such as Component-preload.js) are logged as a WARN message, but will not cause the middleware to break/stop.


    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.




    npm i ui5-middleware-livetranspile

    DownloadsWeekly Downloads






    Unpacked Size

    32.2 kB

    Total Files


    Last publish


    • pmuessig
    • vobu
    • ui5-community-bot