Nonchalant Programming Master

    ui5-task-babel

    2.1.0 • Public • Published

    JavaScript Style Guide

    ui5-task-babel

    Custom UI5 task extension for transpiling code using babel.

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

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

    The task 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 task

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

    With yarn:

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

    Or npm:

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

    Additionally the custom task needs to be manually defined as a ui5 dependency in your project's package.json:

    {
      "devDependencies": {
        "@babel/core": "^7.9.0",
        "ui5-task-babel": "^2.1.0"
      },
      "ui5": {
        "dependencies": [
          "ui5-task-babel"
        ]
      }
    }

    Babel presets

    Add at least one babel preset to your project's dev dependencies, 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 task

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

    builder:
      resources:
        excludes:
          - '**/test/**'
          - '**/localService/**'
      customTasks:
        name: ui5-task-babel
          afterTask: replaceVersion

    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 e.g. ui5 build --clean-dest --all to transpile your code during the build.

    Please make sure to pass option --all to include all project dependencies into the build process.

    Additional configuration

    Options

    The custom task accepts the following configuration options:

    name type Description mandatory default examples
    enabled boolean enable/disable the custom task 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
    files string[] file globs which should (not) be transformed by babel no [**/*.js] [**/*.js, !**/foo/*, !**/bar.js]
    builder:
      resources:
        excludes:
          - '**/test/**'
          - '**/localService/**'
      customTasks:
      name: ui5-task-babel
        afterTask: replaceVersion
        configuration:
          enabled: true
          debug: true
          wrap: true
          files:
            - '**/*.js'
            - '!**/foo/**'
            - '!**/bar.js'

    Runtime Polyfills

    As of Babel 7.4.0, @babel/polyfill has been deprecated in favor of directly including

    First both need to be installed

    with yarn:

    yarn add core-js-bundle regenerator-runtime

    or npm:

    npm i core-js-bundle regenerator-runtime

    And manually added as ui5 dependencies in your project's package.json:

    {
      "dependencies": {
        "core-js-bundle": "^3.6.5",
        "regenerator-runtime": "^0.13.5"
      },
      "ui5": {
        "dependencies": [
          "core-js-bundle",
          "regenerator-runtime"
        ]
      }
    }

    Next both must be defined in ui5.yaml as a project-shim to be consumed as resources:

    specVersion: '2.1'
    kind: extension
    type: project-shim
    metadata:
      name: babel-shims
    shims:
      configurations:
        core-js-bundle:
          specVersion: '2.1'
          type: module
          metadata:
            name: core-js-bundle
          resources:
            configuration:
              paths:
                /resources/core-js-bundle/: ''
        regenerator-runtime:
          specVersion: '2.1'
          type: module
          metadata:
            name: regenerator-runtime
          resources:
            configuration:
              paths:
                /resources/regenerator-runtime/: ''

    Finally both must be included in webapp/manifest.js as resources:

    {
      "sap.ui5": {
        "resources": {
          "js": [
            {
              "uri": "/resources/core-js-bundle/minified.js"
            },
            {
              "uri": "/resources/regenerator-runtime/runtime.js"
            }
          ]
        }
      }
    }

    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-task-babel

    DownloadsWeekly Downloads

    485

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • pwasem