灵感来源于你不知道JS（图书系列）

我们今天在这里做什么？

我们想知道如何使用sap.ui.core.组件容器和sap.ui.core.组件。此外，我们还想知道如何添加自动.js源代码验证与eslint。作为项目的核心源代码和快速入门，您可以使用我的第二篇文章中的项目。openui5被设计成用几种可能的方法来解决一个问题。所以你可以选择。

我的目标是分享我个人使用这个库的经验和其他一些web开发的东西，这有助于你加快使用openui5的开发速度。

所有代码示例都是在MacOS环境下开发的。在其他环境（Linux或Windows）上，过程应几乎相同。

预先要求

最低要求：

准备好MacOS、Linux或Windows操作系统已安装Chromium浏览器节点.js已安装javascript运行时已安装依赖关系管理器Gulp4 javascript task runner全局安装

附加：

Git客户端（命令行或GUI）安装首选IDE安装（例如visualstudio代码或WebStorm）

首先，购物返利，我建议您按照我的第二篇文章中的描述创建项目（首选）。或者只是从存储库中克隆项目（对于懒惰的开发人员）

首先，项目结构会有一点改变

通过yarn添加新的开发人员依赖项

您包.json将自动更新为新的依赖项。从不更新中的依赖项包.json手工操作。

只是简单解释一下所使用的依赖关系：

gulp eslint通过gulp任务验证you.js源代码用于eslint工具的babel eslint解析器

In.eslintrc

配置选项的完整列表可以在这里找到。在配置中，您可能会发现我们可以通过"ecmascriptVersion"：6启用linter的ES6语法，但它不会工作，因为我们为openui5定制了babel预置。这就是为什么我们使用解析器"babel eslint"。

更新gulpfile.js文件

更新src/应用程序启动.js

在src中/应用组件.js

在我们的下一篇文章中，我们将从openui5中发现组件方法的其他很酷的特性。

在src中/清单.json

这是应用组件的最低配置。其他配置选项可以在这里找到。

看起来一切都准备好了！现在我们可以在命令行下发gulp默认任务

src文件夹的内容将通过Eslint（.js）验证，物联网技术应用，通过Babel编译（.js），复制到内存中的根路径，spark大数据，启动watchers，大数据是干嘛的，浏览器同步服务器将启动，我们的应用程序将在Chromium浏览器中打开。

在命令行中我们看到以下

在浏览器中我们看到以下

现在我们需要确保.js源代码的linter正在工作。

更新src/app/组件.js

由于.js文件的更改（在gulpfile.js文件), gulp任务构建将自动发布

在命令行中我们看到以下

并让我们看看如何将ES6源代码的类/扩展编译到ES5 openui5源代码中。

在Chromium浏览器中打开DevTools并单击"源"选项卡。

我们的原始源代码

和我们编译到ES5的代码

所以，今天到此为止。我们项目的源代码可以在这里找到。请随意尝试源代码，因为这只是成为开发人员的一种方法。快乐的编码！

下一个"你不知道Openui5"系列的主题即将到来。

因此，我们增强了我们简单的Openui5应用程序：

使用组件作为应用程序意味着组件是我们应用程序整个ui的主要入口点。但我们仍然在组件内部使用页面。我建议您使用组件，租用服务器，并将其配置为生产使用的应用程序。

并增强我们的开发环境：

通过Eslint添加js代码验证。

演练：步骤9：组件配置演练：步骤10：应用程序描述符应用程序、组件和库的描述符