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.
MIT License
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.
super
keywordmetadata
fieldbabel-preset-ui5
or ui5
for short.Currently this version only supports Babel 6
.
If you still want to use Babel 5 in your project, please try my previous project babel-ui5-plugin.
$ npm install --save-dev babel-preset-ui5
babel-plugin-ui5
require a bunch of plugins includingbabel-preset-es2015
andbabel-plugin-syntax-class-properties
.
Although you can install
babel-plugin-ui5
and its dependencies directly, we strongly recommend to install viababel-preset-ui5
.
Add ui5
to the presets
.
{
"presets": ["ui5"]
}
Suppose 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.
<your-ui5-project>
├── <assets>
├── <src>
│ └── <your_module>
│ └── <sub_folder>
│ ├── ClassA.js
│ └── ClassB.js
├── .babelrc
├── gulpfile.js
└── package.json
Make sure the babel-preset-ui5
is in your own package.json
.
{
...
"devDependencies": {
"babel-cli": "^6.7.5",
"babel-preset-ui5": "^6",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"run-sequence": "^1.1.5"
}
...
}
If you don't, please execute the following commands.
$ npm install --save-dev babel-cli
$ npm install --save-dev del gulp gulp-babel gulp-concat gulp-rename gulp-uglify run-sequence
$ npm install --save-dev babel-preset-ui5
Add a .babelrc
in your project root folder.
{
sourceRoot: "./src",
presets: [
"ui5"
]
}
The
sourceRoot
property can helps the plugin to output the right namespace.
Add a gulpfile.js
in your project root folder.
const babel = require("gulp-babel");
const concat = require("gulp-concat");
const del = require("del");
const gulp = require("gulp");
const rename = require("gulp-rename");
const runSequence = require("run-sequence");
const uglify = require("gulp-uglify");
const SRC_ROOT = "./src";
const ASSETS_ROOT = "./assets";
gulp.task("default", [ "build" ]);
gulp.task("clean", cb => {
del(`${ASSETS_ROOT}`).then(() => {
cb()
}, reason => {
cb(reason);
});
});
gulp.task("build", [ "clean" ], cb => {
runSequence(
"build-js",
"concat-js",
"uglify-js"
cb
);
});
gulp.task("build-js", () => {
return gulp.src(`${SRC_ROOT}/**/*.js`)
.pipe(babel())
.pipe(gulp.dest(`${ASSETS_ROOT}`));
});
gulp.task("concat-js", () => {
return gulp.src(`${ASSETS_ROOT}/**/*.js`)
.pipe(concat("all-dbg.js"))
.pipe(gulp.dest(`${ASSETS_ROOT}`));
});
gulp.task("uglify-js", () => {
return gulp.src(`${ASSETS_ROOT}/all-dbg.js`)
.pipe(uglify())
.pipe(rename(path => {
path.basename = "all";
}))
.pipe(gulp.dest(`${ASSETS_ROOT}`));
});
Please take a look at ui5-loader;
SAP UI5 supports Modulization through a mechanism called library
. With my another
Gulp plugin gulp-ui5-lib, you're
now able to compile hundreds of JavaScript files into just one library preload
JSON file.
Please also take a look at babel-plugin-ui5-example, you'll find the answer.
To get the full project example, please visit babel-plugin-ui5-example.
/*---------------------------------*
* File: src/example/obj/Animal.js *
*---------------------------------*/
import ManagedObject from "sap/ui/base/ManagedObject";
export default class Animal extends ManagedObject
{
metadata: {
properties: {
type: { type: "string" },
nickName: { type: "string" }
}
}
constructor(...args)
{
super(...args);
// TODO: Add your own construction code here.
}
init()
{
// TODO: Add your own initialization code here.
}
callMe()
{
alert(`I'm a ${this.getType()}.
Call me ${this.getNickName()}.`);
}
}
/*---------------------------------*
* File: src/example/obj/Cat.js *
*---------------------------------*/
import Animal from "./Animal";
export default class Cat extends Animal
{
init()
{
super.init();
this.setType("Cat");
}
callMe()
{
super.callMe();
alert("Miao~");
}
static createCat(nickName)
{
const cat = new example.obj.Cat({
nickName
});
return cat;
}
}
/*------------------------------------*
* File: assets/example/obj/Animal.js *
*------------------------------------*/
sap.ui.define(["sap/ui/base/ManagedObject"], function (ManagedObject) {
"use strict";
return ManagedObject.extend("example.obj.Animal", {
metadata: {
properties: {
type: { type: "string" },
nickName: { type: "string" }
}
},
constructor: function constructor() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
ManagedObject.apply(this, [].concat(args));
// TODO: Add your own construction code here.
},
init: function init() {
// TODO: Add your own initialization code here.
},
callMe: function callMe() {
alert("I'm a " + this.getType() + ". Call me " + this.getNickName() + ".");
}
});
});
/*---------------------------------*
* File: assets/example/obj/Cat.js *
*---------------------------------*/
sap.ui.define(["./Animal"], function (Animal) {
"use strict";
return Animal.extend("example.obj.Cat", {
init: function init() {
Animal.prototype.init.apply(this, []);
this.setType("Cat");
},
callMe: function callMe() {
Animal.prototype.callMe.apply(this, []);
alert("Miao~");
}
});
});
example.obj.Cat.createCat = function (nickName) {
"use strict";
var cat = new example.obj.Cat({
nickName: nickName
});
return cat;
};
To get the full project example, please visit babel-plugin-ui5-example.