ui5-middleware-babel

Custom UI5 middleware extension for transpiling code using babel including caching.

For maximum flexibility no babel configuration files or presets will be provided by the custom middleware.

Instead you have to manage your configuration and presets within your project according to your needs.

The middleware will simply call babel.transformAsync which will use your local configuration files for all your project's javascript resources.

Prerequisites

Make sure your project is using the latest UI5 Tooling.

Getting started

Install

Custom middleware

Add the custom middleware and its peer dependencies as devDependencies to your project.

With yarn:

yarn add -D ui5-middleware-babel @babel/core

Or npm:

npm i -D ui5-middleware-babel @babel/core

Additionally the custom middleware needs to be manually defined in ui5.dependencies in your project's package.json:

{
  "ui5": {
    "dependencies": [
      "ui5-middleware-babel"
    ]
  }
}

Babel presets

Add at least one babel preset to your project's devDependencies, e.g. @babel/preset-env.

With yarn:

yarn add -D @babel/preset-env

Or npm:

npm i -D @babel/preset-env

You can learn more about babel presets here.

Configure

Custom middleware

Register the custom middleware in your project's ui5.yaml:

server:
  customMiddleware:
    # babel
    - name: ui5-middleware-babel
      afterMiddleware: compression
      configuration:
        enabled: true
        debug: true
        wrap: true
        excludes:
          - '/test/**'
          - '/localService/**'

Babel config

Create a babel config file, e.g babel.config.js in your project's root directory:

module.exports = api => {
  api.cache(true)
  const presets = [
    '@babel/preset-env'
  ]
  const plugins = []
  const sourceType = 'script'
  return {
    presets,
    plugins,
    sourceType
  }
}

You can learn more about babel config files here.

Usage

Simply run ui5 serve to transpile your code on the fly when running your project.

Additional configuration

Options

The custom middleware accepts the following configuration options

| name | type | description | mandatory | default | examples | |:--------:|:--------:|:------------------------------------------------------------------------------------------:|:---------:|:-------:|:--------------------------------:| | enabled | boolean | enable/disable | no | true | true, false | | debug | boolean | enable/disable debug logs | no | false | true, false | | wrap | boolean | wrap transformed code in an IIFE | no | true | true, false | | excludes | string[] | files globs which should not be transformed by babel | no | [] | [/test/**, /localService/**] |

Browserlist

Consider adding a browserlist configuration to your project for controlling your target browsers. This configuration will automatically be used by babel.

E.g. create a file .browserslistrc in your project's root directory:

> 0.25%
not dead