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