ui5-task-babel-compile

1.0.6 verified Fri May 01 auth: no javascript

A custom UI5 Tooling task extension that converts JavaScript code to support older browsers using Babel and regenerator-runtime. Version 1.0.6 is stable with no recent updates. It integrates seamlessly into UI5 build pipelines, offering an alternative to manual transpilation setups. Key differentiator: it operates as a UI5 builder extension task, hooking into the build process after the replaceVersion task. Designed for OpenUI5 and SAPUI5 applications targeting legacy browser support. Note: it requires additional Babel configuration (e.g., presets) to function properly.

Common errors

error Error: Cannot find module 'babel-core' ↓

cause Missing peer dependency babel-core not installed

fix

npm install babel-core --save-dev

error Error: Cannot find module 'regenerator-runtime' ↓

cause Missing runtime dependency for regenerator-runtime

fix

npm install regenerator-runtime --save

error Error: Could not find a suitable Babel configuration file ↓

cause No .babelrc or babelConfig provided in ui5.yaml

fix

Add a .babelrc file or babelConfig in ui5.yaml configuration.

Warnings

deprecated Babel 6 is outdated; considered deprecated in 2023. ↓

fix Use Babel 7 with @babel/core and @babel/preset-env; adjust configuration accordingly.

gotcha The task requires both babel-core and regenerator-runtime as direct dependencies in the project, not just this package. ↓

fix Install babel-core and regenerator-runtime explicitly.

gotcha The task expects a Babel configuration; if missing, it may fail silently or not transpile anything. ↓

fix Provide a valid babelConfig in ui5.yaml or a .babelrc file in the project root.

deprecated regenerator-runtime is deprecated in favor of @babel/plugin-transform-runtime with @babel/runtime. ↓

fix Use @babel/plugin-transform-runtime and @babel/runtime instead of regenerator-runtime.

Install

npm install ui5-task-babel-compile

yarn add ui5-task-babel-compile

pnpm add ui5-task-babel-compile

Imports

ui5-task-babel-compile (task)
wrong
```
importing as a module in JavaScript code
```
correct
```
name: ui5-task-babel-compile (in ui5.yaml customTasks)
```
This is a UI5 task, not a JavaScript module; it's configured in ui5.yaml, not imported in code.

Quickstart

Adds the Babel compile task to UI5 build, targeting browsers with >1% global usage.

// package.json
{
  "name": "my-ui5-app",
  "version": "1.0.0",
  "devDependencies": {
    "ui5-task-babel-compile": "^1.0.6",
    "babel-core": "^6.26.3",
    "regenerator-runtime": "^0.13.11"
  },
  "ui5": {
    "dependencies": ["ui5-task-babel-compile"]
  }
}

// ui5.yaml
builder:
  customTasks:
    - name: ui5-task-babel-compile
      afterTask: replaceVersion
      configuration:
        babelConfig: {
          presets: [
            ["env", { targets: { browsers: "> 1%" } }]
          ]
        }