babel-plugin-next-ui5 for Babel 6
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.
Features
- Imports
- Class, inheritance and
super
keyword - UI5's
metadata
field - Static methods and fields
- Most of ES6 features supported by Babel, like arrow functions, spreading, default value of parameters, etc.
Babel version
Currently this version only supports Babel 6
.
Usage
1. Install the preset
$ npm install --save-dev babel-preset-next-ui5
babel-plugin-next-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
.
2. Configure .babelrc
Add next-ui5
to the presets
.
Usage with Gulp (strongly recommended)
<your-ui5-project>
├── <assets>
├── <src>
│ └── <your_module>
│ └── <sub_folder>
│ ├── ClassA.js
│ └── ClassB.js
├── .babelrc
├── gulpfile.js
└── package.json
1. Configure ui5sk.properties
Make sure the special properties file is in root of your project
NAMESPACE=example.your.namespace
2. Configure packages.json
Make sure the babel-preset-next-ui5
is in your own package.json
.
... "devDependencies": "babel-cli": "^6.7.5" "babel-preset-next-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-next-ui5
3. Configure .babelrc
Add a .babelrc
in your project root folder.
presets: "next-ui5"
4. Configure gulpfile.js
Add a gulpfile.js
in your project root folder.
const babel = ;const concat = ;const del = ;const gulp = ;const rename = ;const runSequence = ;const uglify = ; const SRC_ROOT = "./src";const ASSETS_ROOT = "./assets"; gulp; gulp; gulp; gulp; gulp; gulp;
5. Build with Webpack
Please take a look at ui5-loader;
Modulization
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.
ES6 Codes
/*---------------------------------** File: src/example/obj/Animal.js **---------------------------------*/;metadata:properties:type: type: "string"nickName: type: "string"{super...args;// TODO: Add your own construction code here.}{// TODO: Add your own initialization code here.}{;}/*---------------------------------** File: src/example/obj/Cat.js **---------------------------------*/;{super;this;}{super;;}static {const cat =nickName;return cat;}
Compiled Codes
/*------------------------------------** File: assets/example/obj/Animal.js **------------------------------------*/sapui;/*---------------------------------** File: assets/example/obj/Cat.js **---------------------------------*/sapui;exampleyournamespace {"use strict";var cat =nickName: nickName;return cat;};