UI5Lab是一个社区驱动的项目，用于为UI5自定义控件库建立存储库。它旨在聚集整个社区的力量，使每个人都能轻松地使用UI5自定义控件。有关UI5Lab的更多信息，请访问：

在这个社区驱动的项目中，每个人都可以共享自己的UI5自定义控件。为此，大淘客怎么推广，需要将UI5控件包装到库中。您可以通过以下步骤来完成此操作。

我将使用webstorm创建我的库，但您可以使用自己的IDE。

您可以始终使用此Github存储库作为UI5Lab库的基础：https://github.com/UI5Lab/UI5Lab-library-simple

这个博客的结果可以在这里找到：https://github.com/lemaiwo/UI5Lab-library-space

什么时候完成此部分后，可以将UI5库共享到UI5Lab：https://blogs.sap.com/2018/03/02/add-your-ui5-library-to-ui5lab/

开始吧！

创建一个新项目并给它一个名称/位置。我会称我的图书馆为"UILab图书馆空间"。我的项目使用相同的名称。

创建的项目完全是空的，所以让我们创建第一个文件夹。UI5控件应该放在"src"文件夹中。请注意，文件夹结构应与命名空间对齐。例如，我想使用名称空间"ui5"实验室空间对于我的控件，则需要"src"文件夹中的文件夹结构"ui5lab/wl/space"src"在本例中是根文件夹。

您应该有这样的内容：

在最低的文件夹（"空间"）中，我现在可以创建自己的UI5控件：

这是我的UI5控件在元数据和所有函数中的外观。我正在为每个属性使用一个setter，因此控件在其中一个属性更改后不会重新渲染。

同时在同一文件夹中为渲染器创建一个文件。渲染器应与UI5控件同名，但后面有"渲染器"。

在渲染器中，您可以使用JavaScript将html写入DOM，您可以在此处找到完整的代码：https://github.com/lemaiwo/UI5Lab-library-space/blob/master/src/UI5Lab/wl/space/IntroRenderer.js

如果需要在控件中添加css，则必须将它添加到每个主题的css文件中。创建一个主题文件夹，其中每个SAPUI5主题（您要支持的主题）的子文件夹与控件位于同一位置。添加一个"库.source.less"每个主题的文件。

我将使用一个相同的较少的文件作为UI5控件的css。我在"themes"文件夹中创建了一个less文件，并将此less文件包含在库less files中。

在基本主题的库less文件中，我包含我自己的UI5控件的less文件简介". 同样对于每个主题，必须包含原始的SAPUI5-less文件。注意路径前面的"./"。这取决于命名空间/文件夹结构的长度。它应该上升到根文件夹"src"。

我在UI5控件中使用图像，因此，我在less文件中创建了一个可以访问的文件夹images.

您可以在这里找到less文件：https://github.com/lemaiwo/UI5Lab-library-space/tree/master/src/UI5Lab/wl/space/themes

要使此控件作为库的一部分可访问，我们需要添加以下两个文件：

.libraryjs

英寸图书馆.js"我们列出作为库的一部分的所有控件，并返回库的名称。

您可以从这里复制代码：https://github.com/lemaiwo/UI5Lab-library-space/blob/master/src/UI5Lab/wl/space/library.js

需要".library"文件才能使其发挥库的功能。定义依赖项和库的名称。

代码：https://github.com/lemaiwo/UI5Lab library space/blob/master/src/UI5Lab/wl/space/.library

我们还想看看控制是否有效。因此，必须创建一个"test"文件夹。从添加文件开始"库.json""添加到此文件夹。在此文件中，您必须输入库的名称。

在测试文件夹中，您必须创建与库中相同的文件夹结构，并添加额外的文件夹"sample"。在我的示例中，我添加了一个文件夹images来存储我在示例中使用的图像。在"sample"文件夹中，我们可以创建示例空间简介.html"

我的例子的完整代码：https://github.com/lemaiwo/UI5Lab-library-space/blob/master/test/UI5Lab/wl/space/sample/SpaceIntro.html

在这个例子中，你有两种可能。您可以选择添加基本href，这样就不必在"sap ui"之前添加"../"-核心.js"在引导代码中。在我的示例中，我不使用base，因为我希望使用"getModulePath"来获取图像。否则，那云，我的图片会有错误的url。

在这里，我只是将我的控件添加到内容中，以显示它的工作情况。

我们已经创建了我们的控件，将其添加到库中，并创建了一个测试脚本。现在我们只需要添加配置文件来构建库。因此我们添加了以下文件：

jsonbower是一个web应用程序包管理器。这将加载我们在库或测试脚本中需要的openui5库https://bower.io/js公司Grunt是一个任务运行程序，我们使用它来创建库的有效版本。例如，企业正版软件，它将创建完整库的预加载版本。https://gruntjs.com/json文件此文件包含NPM所需的配置。NPM将安装我们项目中需要的所有包/工具，新手建站教程，比如bower和grunt。https://docs.npmjs.com/getting-started/using-a-package.json

您的项目应该如下：

从中心简单示例复制Gruntfile并更改库名称：

https://github.com/UI5Lab/UI5Lab-library-simple/blob/master/Gruntfile.js

始终从简单示例中的文件开始，这很可能包含有关UI5Lab的最新更新。

我在grunt中禁用了"lint"任务，因为它给了我一些阻止grunt进程的警告。如果它没有给你任何警告/错误，您可以跳过此步骤。

复制包.json更改库名：

https://github.com/UI5Lab/UI5Lab-library-simple/blob/master/package.json

复制bower文件并更改库名：

https://github.com/UI5Lab/UI5Lab-library-simple/blob/master/bower.json

从您创建包.json, 您将在Webstorm中获得此消息。（这就是为什么我更喜欢webstorm）。您现在可以点击它，它将运行命令"npm install"。