babel-plugin-transform-ui5 for Babel 6
An UNOFFICIAL Babel transform plugin for SAP UI5 modules. It transforms SAP UI5 module imports into sap.ui.define()
format, while skips transformation for the other imports. The other imports should be handled by the packaging tool like webpack.
Features
- Class, inheritance and
super
keyword - UI5's
metadata
field - Static methods and fields
Babel version
Currently this version only supports Babel 6
.
Usage with webpack
Suppose that in your project, all the source codes are stored in app
folder.
<your-ui5-project>
├── <app>
│ └── <your_module>
│ └── <sub_folder>
│ ├── ClassA.js
│ └── ClassB.js
├── .babelrc
├── webpack.config.js
└── package.json
1. Install the dependencies
... "devDependencies": "babel-core": "^6.25.0" "babel-loader": "^7.1.1" "babel-plugin-syntax-class-properties": "^6.13.0" "babel-plugin-transform-ui5": "^6.1.2" "babel-polyfill": "^6.23.0" "babel-preset-env": "^1.6.0" "webpack": "^3.4.1" ...
$ npm install --save-dev babel-preset-transform-ui5 babel-plugin-syntax-class-properties
2. Configure .babelrc
Add transform-ui5
to the plugins
and pass the options to track the imports that should be transformed.
The
sourceRoot
property can helps the plugin to output the right namespace.
3. Configure webpack.config.js
Add a gulpfile.js
in your project root folder.
moduleexports = entry: 'Component': 'babel-polyfill' path 'test/unit/allTests': 'babel-polyfill' path output: path: path filename: '[name].js' // devtool: 'cheap-module-eval-source-map', module: rules: test: /\.m?js$/ exclude: /node_modules/ loaders: 'babel-loader' ;
4. Build with Webpack
Please take a look at example, you'll find the answer.
Compilation
ES6 Codes
/*---------------------------------** File: app/Component.mjs **---------------------------------*/;;metadata = manifest: 'json'{UIComponentprototypeinit;}/*---------------------------------** File: app/controller/App.js **---------------------------------*/;;{;}{}/*---------------------------------** File: app/store/index.js **---------------------------------*/;;let state = null;{if !statestate =app:value: 0;return state;}{controller;}{if !actionsactionNamereturn console;tryreturn actionsactionName state dispatch ...payload;catch errconsole;}
Compiled Codes
/*------------------------------------** File: app/Component.mjs **------------------------------------*/;var UIComponent;var AppController;sapui;/*---------------------------------** File: app/controller/App.js **---------------------------------*/;var Controller;sapui;/*---------------------------------** File: app/store/index.js **---------------------------------*/;var JSONModel;sapui;let state = null;{if !statestate =app:value: 0;return state;}{controller;}{...}