{"id":14981934,"url":"https://github.com/magiccube/babel-plugin-ui5","last_synced_at":"2025-10-29T09:31:32.338Z","repository":{"id":57188989,"uuid":"60068152","full_name":"MagicCube/babel-plugin-ui5","owner":"MagicCube","description":"An UNOFFICIAL experimental Babel transformer plugin for SAP UI5. It allows you to develop SAP UI5 applications by using the latest ES6, including new syntax and objective oriented programming technology.","archived":false,"fork":false,"pushed_at":"2016-08-09T05:34:28.000Z","size":25,"stargazers_count":18,"open_issues_count":2,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-11T23:04:41.831Z","etag":null,"topics":["babel","gulp","sap","sapui5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagicCube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-31T07:37:39.000Z","updated_at":"2019-03-03T17:01:58.000Z","dependencies_parsed_at":"2022-08-28T11:00:16.476Z","dependency_job_id":null,"html_url":"https://github.com/MagicCube/babel-plugin-ui5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fbabel-plugin-ui5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fbabel-plugin-ui5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fbabel-plugin-ui5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicCube%2Fbabel-plugin-ui5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagicCube","download_url":"https://codeload.github.com/MagicCube/babel-plugin-ui5/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857951,"owners_count":16556049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","gulp","sap","sapui5"],"created_at":"2024-09-24T14:04:29.999Z","updated_at":"2025-10-29T09:31:27.048Z","avatar_url":"https://github.com/MagicCube.png","language":"JavaScript","readme":"# To get the full project example, please visit [babel-plugin-ui5-example](https://github.com/MagicCube/babel-plugin-ui5-example).\n\n# babel-plugin-ui5 for Babel 6\nAn UNOFFICIAL experimental Babel transformer plugin for SAP UI5.\nIt allows you to develop SAP UI5 applications by using the latest [ES6](http://babeljs.io/docs/learn-es2015/), including new syntax and objective oriented programming technology.\n\n## Features\n+ Imports\n+ Class, inheritance and `super` keyword\n+ UI5's `metadata` field\n+ Static methods and fields\n+ Most of ES6 features supported by Babel, like arrow functions, spreading, default value of parameters, etc.\n+ Packed up in a preset named `babel-preset-ui5` or `ui5` for short.\n\n## Babel version\nCurrently this version only supports `Babel 6`.\n\nIf you still want to use Babel 5 in your project, please try my previous project [babel-ui5-plugin](https://github.com/MagicCube/babel-ui5-plugin).\n\n## Usage\n### 1. Install the preset\n```\n$ npm install --save-dev babel-preset-ui5\n```\n\u003e `babel-plugin-ui5` require a bunch of plugins including `babel-preset-es2015` and `babel-plugin-syntax-class-properties`.\n\n\u003e Although you can install `babel-plugin-ui5` and its dependencies directly,\nwe strongly recommend to install via `babel-preset-ui5`.\n\n### 2. Configure .babelrc\nAdd `ui5` to the `presets`.\n```json\n{\n  \"presets\": [\"ui5\"]\n}\n```\n\n## Usage with Gulp *(strongly recommended)*\n\nSuppose that in your project, all the source codes are stored in `src` folder, and all the compiled codes will later be put in `assets` folder.\n\n```\n\u003cyour-ui5-project\u003e\n    ├── \u003cassets\u003e\n    ├── \u003csrc\u003e\n    │   └── \u003cyour_module\u003e\n    │       └── \u003csub_folder\u003e\n    │           ├── ClassA.js\n    │           └── ClassB.js\n    ├── .babelrc\n    ├── gulpfile.js\n    └── package.json\n```\n\n### 1. Configure packages.json\nMake sure the `babel-preset-ui5` is in your own `package.json`.\n```js\n{\n    ...\n    \"devDependencies\": {\n        \"babel-cli\": \"^6.7.5\",\n        \"babel-preset-ui5\": \"^6\",\n        \"del\": \"^2.2.0\",\n        \"gulp\": \"^3.9.1\",\n        \"gulp-babel\": \"^6.1.2\",\n        \"gulp-concat\": \"^2.6.0\",\n        \"gulp-rename\": \"^1.2.2\",\n        \"gulp-uglify\": \"^1.5.3\",\n        \"run-sequence\": \"^1.1.5\"\n    }\n    ...\n}\n```\nIf you don't, please execute the following commands.\n```\n$ npm install --save-dev babel-cli\n$ npm install --save-dev del gulp gulp-babel gulp-concat gulp-rename gulp-uglify run-sequence\n$ npm install --save-dev babel-preset-ui5\n```\n\n### 2. Configure .babelrc\nAdd a `.babelrc` in your project root folder.\n```js\n{\n    sourceRoot: \"./src\",\n    presets: [\n        \"ui5\"\n    ]\n}\n```\n\u003e The `sourceRoot` property can helps the plugin to output the right namespace.\n\n### 3. Configure gulpfile.js\nAdd a `gulpfile.js` in your project root folder.\n```js\nconst babel = require(\"gulp-babel\");\nconst concat = require(\"gulp-concat\");\nconst del = require(\"del\");\nconst gulp = require(\"gulp\");\nconst rename = require(\"gulp-rename\");\nconst runSequence = require(\"run-sequence\");\nconst uglify = require(\"gulp-uglify\");\n\nconst SRC_ROOT = \"./src\";\nconst ASSETS_ROOT = \"./assets\";\n\ngulp.task(\"default\", [ \"build\" ]);\n\ngulp.task(\"clean\", cb =\u003e {\n    del(`${ASSETS_ROOT}`).then(() =\u003e {\n        cb()\n    }, reason =\u003e {\n        cb(reason);\n    });\n});\n\ngulp.task(\"build\", [ \"clean\" ], cb =\u003e {\n    runSequence(\n        \"build-js\",\n        \"concat-js\",\n        \"uglify-js\"\n        cb\n    );\n});\n\ngulp.task(\"build-js\", () =\u003e {\n    return gulp.src(`${SRC_ROOT}/**/*.js`)\n        .pipe(babel())\n        .pipe(gulp.dest(`${ASSETS_ROOT}`));\n});\n\ngulp.task(\"concat-js\", () =\u003e {\n    return gulp.src(`${ASSETS_ROOT}/**/*.js`)\n        .pipe(concat(\"all-dbg.js\"))\n        .pipe(gulp.dest(`${ASSETS_ROOT}`));\n});\n\ngulp.task(\"uglify-js\", () =\u003e {\n    return gulp.src(`${ASSETS_ROOT}/all-dbg.js`)\n        .pipe(uglify())\n        .pipe(rename(path =\u003e {\n            path.basename = \"all\";\n        }))\n        .pipe(gulp.dest(`${ASSETS_ROOT}`));\n});\n```\n\n### 4. Build with Webpack\nPlease take a look at [ui5-loader](https://github.com/MagicCube/ui5-loader);\n\n\n## Modulization\nSAP UI5 supports Modulization through a mechanism called `library`. With my another\nGulp plugin [gulp-ui5-lib](https://github.com/MagicCube/gulp-ui5-lib), you're\nnow able to compile hundreds of JavaScript files into just one library preload\nJSON file.\n\nPlease also take a look at [babel-plugin-ui5-example](https://github.com/MagicCube/babel-plugin-ui5-example),\nyou'll find the answer.\n\n\n## Example\nTo get the full project example, please visit [babel-plugin-ui5-example](https://github.com/MagicCube/babel-plugin-ui5-example).\n\n### ES6 Codes\n``` javascript\n/*---------------------------------*\n * File: src/example/obj/Animal.js *\n *---------------------------------*/\n\nimport ManagedObject from \"sap/ui/base/ManagedObject\";\n\nexport default class Animal extends ManagedObject\n{\n    metadata: {\n        properties: {\n            type: { type: \"string\" },\n            nickName: { type: \"string\" }\n        }\n    }\n\n    constructor(...args)\n    {\n        super(...args);\n        // TODO: Add your own construction code here.\n    }\n\n    init()\n    {\n        // TODO: Add your own initialization code here.\n\t}\n\n    callMe()\n    {\n        alert(`I'm a ${this.getType()}.\n        Call me ${this.getNickName()}.`);\n    }\n}\n\n\n\n/*---------------------------------*\n * File: src/example/obj/Cat.js *\n *---------------------------------*/\nimport Animal from \"./Animal\";\n\nexport default class Cat extends Animal\n{\n    init()\n    {\n        super.init();\n        this.setType(\"Cat\");\n    }\n\n    callMe()\n    {\n        super.callMe();\n        alert(\"Miao~\");\n    }\n\n    static createCat(nickName)\n    {\n        const cat = new example.obj.Cat({\n            nickName\n        });\n        return cat;\n    }\n}\n```\n\n## Compiled Codes\n``` javascript\n/*------------------------------------*\n * File: assets/example/obj/Animal.js *\n *------------------------------------*/\nsap.ui.define([\"sap/ui/base/ManagedObject\"], function (ManagedObject) {\n    \"use strict\";\n\n    return ManagedObject.extend(\"example.obj.Animal\", {\n        metadata: {\n            properties: {\n                type: { type: \"string\" },\n                nickName: { type: \"string\" }\n            }\n    },\n    constructor: function constructor() {\n        for (var _len = arguments.length, args = Array(_len), _key = 0; _key \u003c _len; _key++) {\n            args[_key] = arguments[_key];\n        }\n\n        ManagedObject.apply(this, [].concat(args));\n        // TODO: Add your own construction code here.\n    },\n    init: function init() {\n        // TODO: Add your own initialization code here.\n    },\n    callMe: function callMe() {\n        alert(\"I'm a \" + this.getType() + \". Call me \" + this.getNickName() + \".\");\n    }\n  });\n});\n\n\n/*---------------------------------*\n * File: assets/example/obj/Cat.js *\n *---------------------------------*/\nsap.ui.define([\"./Animal\"], function (Animal) {\n    \"use strict\";\n\n    return Animal.extend(\"example.obj.Cat\", {\n        init: function init() {\n            Animal.prototype.init.apply(this, []);\n            this.setType(\"Cat\");\n        },\n        callMe: function callMe() {\n            Animal.prototype.callMe.apply(this, []);\n            alert(\"Miao~\");\n        }\n    });\n});\n\nexample.obj.Cat.createCat = function (nickName) {\n    \"use strict\";\n\n    var cat = new example.obj.Cat({\n        nickName: nickName\n    });\n    return cat;\n};\n\n```\n\n### Full example\nTo get the full project example, please visit [babel-plugin-ui5-example](https://github.com/MagicCube/babel-plugin-ui5-example).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fbabel-plugin-ui5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagiccube%2Fbabel-plugin-ui5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagiccube%2Fbabel-plugin-ui5/lists"}