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
  • These two are not the same but the concept is comparable. It will implement a piece of code that’s missing in the browser to support the latest version of JavaScript. You can read more about it in this blog: http://blog.respoke.io/post/111278536998/javascript-shim-vs-polyfill
  • To support ES6 in your project, you can include the following shims:
    • ES6: https://www.npmjs.com/package/es6-shim
    • ES5: https://www.npmjs.com/package/es5-shim
• 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! 🙂