Skip to Content

Introduction

The new Full Stack SAP Web IDE comes with integration of Grunt. Grunt is a JavaScript task runner and will automate the build process of your UI5 project. It will, for example, minify the JavaScript files, generate a preload and so on…

There are already two great tutorials on how Grunt works in the SAP Web IDE:

Basic tutorial: https://www.sap.com/developer/tutorials/webide-grunt-basic.html

More advanced tutorial: https://www.sap.com/developer/tutorials/webide-grunt-plugins.html

Grunt offers a lot more than what you see in these two tutorials. It has a lot of Plugins which you can be used to optimize the build process of your UI5 app. You can search for any plugin on the Grunt website: https://gruntjs.com/plugins

This Grunt feature opens a lot of possibilities for UI5 developers that are using the SAP Web IDE. Until now, you still had to use another IDE to use Grunt.

One of these possibilities is Babel. Babel is a compiler to use next generation JavaScript in UI5 project, more precisely ECMAScript 6 also known as ES6.

The problem of ES6 is that it isn’t supported in older browser. As not all customers have the latest version of each browser rolled out in the company, this is a real pain. Still, it’s possible to already use ES6 even if the customer is using older browser versions. To do so, you have two options:

  • Shims and polyfills
  • Transpiler (compiler)
    • A transpiler will convert your ES6 code to another (older) JavaScript (ECMAScript 5 for example) version that’s supported by all browsers. As this will convert your ES6 code to ES5, there is no need to include shims to support new features of ES6.
    • Babel is a JavaScript Compiler that will to this conversion for you: https://babeljs.io/

(Which option that you should choose is still up to you.)

In this blog, I’m going to explain how you can use Babel as a Transpiler/Compiler for your UI5 project in the Full Stack Web IDE.

Configure Grunt

First, we must define the Grunt plugins that we need to build the UI5 project. For Babel, we must include:

  • Babel-core
    • Core library of babel
  • Babel-preset-env
    • Contains the environment for the compiler, this is the recommended preset.
  • Grunt-babel
    • Required to configure Babel in Grunt

The versions of the different components have to match, otherwise you could have unexpected errors.

Package.json will look like this:

{
	"name": "BabelDemo",
	"version": "0.0.1",
	"description": "",
	"private": true,
	"devDependencies": {
		"babel-core": "7.0.0-alpha.19",
		"babel-preset-env": "2.0.0-alpha.19",
		"grunt-babel": "7.0.0",
		"@sap/grunt-sapui5-bestpractice-build": "^1.3.19"
	}
}

We want to combine Babel together with the UI5 best practice build process. Therefore, we must make some changes in the “Grunfile.js”.

  • Babel configuration:
    • Will take all the JavaScript files from the “webapp” folder and put the result in a temporary Babel folder
    • It will NOT take JavaScript files from the library folder. If your library folder has another name, you should change it in the Grunt file.
  • Clean Babel
    • The Babel folder should be cleaned after the build process. For all other folders it is integrated in the UI5 best practice build process.
  • Copy to Debug and Tmp
    • We must change the copy configuration for both debug and tmp copy commands. Instead of copying the JavaScript files from the “webapp” folder, they must use the Babel folder. But ONLY for JavaScript files that are not in the library folder!

By using Babel, it can be possible that you have warnings during the build process. To have more information about a warning, I activated the “stack” option of grunt. This will give a stack trace of warnings and errors.

Gruntfile.js

module.exports = function(grunt) {
	'use strict';

	var webAppDir = "webapp";
	var targetDir = "dist";
	var tmpDir = targetDir + "/tmp";
	var tmpDirDbg = targetDir + "/tmp-dbg";
	var tmpDirBabel = targetDir + "/tmp-babel";

	var config = {
		babel: {
			options: {
				sourceMap: false,
				presets: ['env']
			},
			dist: {
				files: [{
					expand: true, // Enable dynamic expansion.
					cwd: 'webapp/', // Src matches are relative to this path.
					src: ['**/*.js'],
					dest: tmpDirBabel, // Destination path prefix.
					//ext: '.js',   // Dest filepaths will have this extension.
					//extDot: 'first',   // Extensions in filenames begin after the first dot
					filter: function(filepath) {
						return !filepath.match(new RegExp('webapp/libs', 'gi'));
					}
				}]
			}
		},
		clean: {
			build: [targetDir],
			cleanBabel: [tmpDirBabel]
		},
		copy: {
			copyToDbg: {
				files: [{
					expand: true,
					src: "**/*.js",
					dest: tmpDirDbg,
					cwd: tmpDirBabel,
					filter: function(filepath) {
						// prevent js from localService to be copied
						return !filepath.match(new RegExp(webAppDir + "(\\/|\\\\)localService", "gi"));
					}
				}, {
					expand: true,
					src: 'libs/**/*.js',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: "**/*.css",
					dest: tmpDirDbg,
					cwd: webAppDir
				}]
			},
			copyToTmp: {
				files: [{
					expand: true,
					src: '**/*.js',
					dest: tmpDir,
					cwd: tmpDirBabel,
					filter: function(filepath) {
						// prevent js from localService to be copied
						return !filepath.match(new RegExp('build' + '(\\/|\\\\)localService', 'gi'));
					}
				}, {
					expand: true,
					src: 'libs/**/*.js',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: '**/*.css',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: 'localService/metadata.xml',
					dest: tmpDir,
					cwd: webAppDir
				}, {
					expand: true,
					src: '**/*',
					dest: tmpDir,
					cwd: webAppDir,
					filter: function(filepath) {
						// prevent js and css files and contents of webapp/test from being copied
						return !filepath.match(new RegExp("(" + webAppDir +
							"(\\/|\\\\)test|${webAppDir}(\\/|\\\\)localService|\\.js$|\\.css$|\\.ts$|\\test.html$)", "gi"));
					}
				}]
			}
		}
	};

	grunt.loadNpmTasks('grunt-babel');
	grunt.loadNpmTasks("@sap/grunt-sapui5-bestpractice-build");
	grunt.config.merge(config);

	grunt.registerTask('default', 'runs my tasks', function() {
		var tasks = [
			'clean:build',
			'babel',
			'build',
			'lint',
			'clean:cleanBabel'
		];

		// Use the force option for all tasks declared in the previous line
		// grunt.option('force', true);
		grunt.option('stack', true);
		grunt.task.run(tasks);
	});
};

 

Configure ESLint

Using ES6 in the SAP Web IDE will result in unwanted errors on ES6 syntax. You can avoid this by following these steps:

Go to the Project Settings ==> Code Checking ==> Validator Configuration and add “es6”:true to “env”:

Use ES6

Now start using ES6! As an example, I created a basic UI5 project in which I’m using a few ES6 features to do some array manipulations.

I have an array with some numbers, convert it to objects and get the odd and even numbers out of it. On the view, I show the three lists.

Controller:

View:

The app will look like this:

After running Grunt

After running Grunt, the controller will look like this in the “dist” folder:

If I run the app from the dist folder, it will show the same result:

You can find the complete source code (including “dist” folder) on github: https://github.com/lemaiwo/UI5Babel

 

More ES6 features: http://es6-features.org

 

Start using ES6 in your UI5 project! 🙂

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

      1. Fabio Pagoti

        I wonder why someone has decided to fork Web IDE and create a “Full stack” one. I would never switch IDE all the time to run grunt or do a simple task like that.

        (0) 
        1. Michal Keidar

          Hi Fabio,

          You are not expected to switch IDE every time you want to run a Grunt task..

          Currently SAP Web IDE has several versions but this is only because we’re in transition phase. Our goal is to have one IDE, with all current capabilities. We didn’t dimply “fork” Web IDE, the entire backend has changed (from Orion to CHE).

          If you’re interested in more information, please find my blog.

          Regards,
          Michal.

           

          (1) 
  1. Sergio Guerrero

    thanks for sharing this blog. it is very informative and helpful.

     

    is this only working on current version of Web IDE? would it work on the  WEB IDE version that comes with HANA SP12 ?

     

     

    (0) 
  2. Alexander Chan

    Thanks for sharing, just a few questions and comments:

    1. The last time I looked at the preview versions the grunt build task had to be run each time we want to test.  Do you know if this has changed and if we can just have it running and building watching for changes?  it would be nice to optionally have a live reload or hot reload.
      Testing in chrome can get us the es6 features but it would be nice to test against the dist version always.

    This is more for someone from sap:

    Are there plans to allow different task runners?  Many of us have a preference for the more powerful webpack and giving us this customization would be one less reason to use a local build setup.

    Thanks!

    (0) 

Leave a Reply