新的全栈sapwebide集成了Grunt。Grunt是一个JavaScript任务运行程序，它将自动化UI5项目的构建过程。例如，它将缩小JavaScript文件，生成预加载等…

关于Grunt如何在SAP Web IDE中工作，云服务器免，已经有两个很好的教程：

基本教程：https://www.sap.com/developer/tutorials/webide-grunt-basic.html

更高级的教程：https://www.sap.com/developer/tutorials/webide-grunt-plugins.html

Grunt提供的远远超过你在这两个方面看到的教程。它有很多插件，大数据是什么概念，可以用来优化UI5应用程序的构建过程。您可以在Grunt网站上搜索任何插件：https://gruntjs.com/plugins

这个Grunt特性为使用SAP Web IDE的UI5开发人员提供了很多可能性。直到现在，您仍然需要使用另一个IDE来使用Grunt.

其中一个可能性是Babel。Babel是在UI5项目中使用下一代JavaScript的编译器，更确切地说是ECMAScript 6，也称为ES6。

ES6的问题是它在旧浏览器中不受支持。由于并非所有的客户都有公司推出的每款浏览器的最新版本，这是一个真正的痛苦。尽管如此，自助建站开发，即使客户使用的是较旧的浏览器版本，也有可能已经使用了ES6。为此，您有两种选择：

填隙片和填充胶这两个概念是不一样的，但概念是可比的。它将实现浏览器中缺少的一段代码，以支持最新版本的JavaScript。您可以在本博客中了解更多信息：要在项目中支持ES6，可以包括以下内容：第六部分：https://www.npmjs.com/package/es6-shim第五部分：https://www.npmjs.com/package/es5-shimTranspiler（编译器）transpiler会将您的ES6代码转换为其他（较旧的）JavaScript（例如ECMAScript 5）版本，所有浏览器都支持该版本。因为这将把您的ES6代码转换成ES5，所以不需要包括垫片来支持ES6的新功能。Babel是一个JavaScript编译器，它将为您实现此转换：https://babeljs.io/

（您应该选择哪个选项仍然取决于您。）

在这个博客中，我将解释如何在完整堆栈的Web IDE中使用Babel作为UI5项目的Transpiler/编译器。

首先，我们必须定义构建UI5项目所需的Grunt插件。对于巴贝尔，我们必须包括：

巴贝尔核心巴别塔核心图书馆巴别塔预设环境包含编译器的环境，这是建议的预设。咕噜巴别塔Grunt中需要配置Babel

不同组件的版本必须匹配，否则可能会出现意外错误。

包.json看起来是这样的：

我们希望将Babel与UI5最佳实践构建过程结合起来。因此，我们必须对"改革"作出一些改变Grunfile.js文件"

巴别塔配置：将从"webapp"文件夹中获取所有JavaScript文件，并将结果放入临时Babel文件夹它不会从库文件夹中获取JavaScript文件。如果库文件夹有其他名称，则应在Grunt文件中更改它。干净的巴别塔构建过程结束后，应该清理Babel文件夹。对于所有其他文件夹，它集成在UI5最佳实践构建过程中。复制到调试和Tmp我们必须更改debug和tmp copy命令的拷贝配置。它们必须使用Babel文件夹，而不是从"webapp"文件夹复制JavaScript文件。但只适用于不在库文件夹中的JavaScript文件！

通过使用Babel，在构建过程中可能会出现警告。为了获得关于警告的更多信息，我激活了grunt的"stack"选项。这将给出警告和错误的堆栈跟踪Gruntfile.js文件

在SAP Web IDE中使用ES6将导致ES6语法出现不必要的错误。您可以通过以下步骤避免这种情况：

转到项目设置==>代码检查==>验证程序配置并将"es6"：true添加到"env"：

现在开始使用es6！作为一个例子，我创建了一个基本的UI5项目，人工智能知识体系，在这个项目中我使用了一些ES6特性来做一些数组操作。

我有一个带有一些数字的数组，将它转换成对象，并从中得到奇数和偶数。在视图中，企业网站自助建站，我显示了三个列表。

控制器：

视图：

应用程序将如下所示：

运行Grunt后，控制器将在"dist"文件夹中如下所示：

如果我从dist文件夹运行应用程序，它将显示相同的结果：

您可以在github上找到完整的源代码（包括"dist"文件夹）：https://github.com/lemaiwo/UI5Babel