Nifty Procrastination Machine

    ui5-middleware-babel

    2.1.0 • Public • Published

    JavaScript Style Guide

    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
    

    Install

    npm i ui5-middleware-babel

    DownloadsWeekly Downloads

    18

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    9.49 kB

    Total Files

    11

    Last publish

    Collaborators

    • pwasem