lolek24/ui5g

The ultimate generator for UI5

The ultimate generator for UI5

The ultimate generator for OpenUI5/SAPUI5, provide the next generation syntax for UI5 envrionment.

Features

• Most ES6 & Typescript syntax support. (powered by babel-preset-ui5-next)
• Full module system mapping. (powered by babel-preset-ui5-next)
• Smart preload.js file. (powered by gulp-ui5-eager-preload-plugin)
• React JSX syntax support. (powered by babel-preset-ui5-next)
• Import npm libraries. (powered by gulp-ui5-eager-preload-plugin)
• VSCode auto import support. (powered by @ui5-next/types)
• Pre-defined vscode, eslint, babel, and gulp config
• Electron support.
• Cordova (Experimental) support.

Example Project

UI5 To Do is a sample project built on the next generation UI5 technic. It contains:

• es6 modules
• jsx syntax
• using npm module
• redux integration. (so that user can inspect model by redux devtools)
• reactive programming
• no controller & view

features.

Installation

Firstly, install Yeoman and generator-ui5g using npm (we assume you have pre-installed node.js). Here is a generated sample app

npm i -g yo generator-ui5g

Generate Project

Run yo ui5g to generate your own project.

The project will be generated in a new folder, and the folder name is same as app name.

Also, dependencies will be auto installed by npm

Development

start your development, this command will open ui5 application by BrowserSync

npm start

Build

npm run build

Configuration

• babel, edit .babelrc to modify babel behavior, for example, make sourcemaps inline

• eslint, edit .eslintrc to modify eslint lint config, by default, new project will use most rules of ui5 standard, only add es6 and other essential rules.

• gulp, edit gulpfile.js to modify gulp task and other task behavior, you can add sass or uglify or other processes manually, or adjust src/dist directory

• proxy, edit proxies.js, supported by gulp connect, use a traditional node lib, it can set local proxy to remote server

Command

• npm start, default gulp will start a hot reload server, based on BrowserSync. Recommended to develop in this way.

• npm run build, build files to dist directory, and Component-preload.js will be created.

CHANGELOG

About

This generator is written by Theo but some ideas come from Madeleine.

The idea of JSX Support is from Kenny, just a syntactic sugar.

Very pleased to be able to help you.