虚拟主机_腾讯云】_速度快

2021-05-05 06:12

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

到目前为止,大数据是什么,我们已经收集了20多个社区图书馆,在过去的几个月里,这个项目已经成熟了不少。我们的初始原型使用grunt和bower加载UI5依赖项。最近,我们已经将所有UI5Lab存储库切换到npm模块和新的UI5工具。感谢@mlauffer、@Stermi、@WittmerJ和@Randombyte的帮助!

虽然旧的库结构仍然可以正常工作,上云,但我们建议对所有社区库切换到新的工具。Bower已被弃用,新的UI5工具比grunt简单得多。

在本指南中,我将根据我的UI5Lab库openui5.parallax解释使其工作的简单步骤。ui5也使用相同的代码基实验室几何模板库

假设你已经按照我们的UI5Lab文档创建了你的库,只需要几个步骤:

让我们一步一步来做…

1。从bower切换到OpenUI5 npm模块

这个步骤非常简单:

删除鲍尔.json文件修改您的包.json文件来加载npm模块,而不是不推荐使用的bower模块。更新你的.gitignore和.npmignore,把那些凉亭小路也扔了。最后,别忘了更新您的文档–在开发设置步骤中不再需要bower安装。

包.json

添加新的@openui5"dependencies"并删除bower"devDependencies"

注意:如果您希望继续使用Grunt,您必须调整Gruntfile.js文件一点。您可以在此提交中找到说明。我们不需要在这里,因为我们立即切换到新的UI5工具。切换到新的UI5构建和开发工具

现在是切换服务器和构建工具堆栈的时候了。我们需要将dev依赖项添加到新的UI5工具中,并交换启动和构建脚本。我们还将一些新的ui5lab元数据添加到包.json. 最后,我们在项目中添加一个ui5.yaml配置文件,并调整忽略文件Gruntfile.js文件

删除它,我们不再需要它

包.json

将脚本替换为"ui5 serve"和"ui5 build"命令,添加"prepare"脚本将库版本和ui5lab浏览器依赖项增加到1.0.0添加"ui5lab"部分并填写名称空间、图标和显示名称(用于将来的创新)添加"@ui5/cli"dev dependency

ui5.yaml

为ui5工具定义一个库项目,大数据时代的特点,应用程序将使用类型"application"。这将指导工具正确地提供资源,并相应地构建库预加载。

注意:如果您喜欢做一些花哨的事情或需要对库进行特殊处理,GitHub上还有其他文档可用。例如,在我的库openui5 parallax中,我必须定义一个垫片来正确加载第三方库资源。先试试标准方法,大数据教程,如果对你的第三方依赖不起作用,看看我的图书馆作为参考准备.js

添加一个"准备.js"文件到您的根文件夹–这将启用加载UI5Lab浏览器并填充库.json安装后自动使用库名称空间归档一次。

.gitignore

在您的浏览器中添加一行忽略对UI5Lab浏览器的引用项目。如果您通过npm交付库,我们建议您也忽略dist文件夹,以免GitHub repo中出现重复文件:

.npmignore

添加行,以免意外地将浏览器发布到npm模块

3。测试新的设置并检查您的资源路径

删除node\u modules文件夹和包-锁定.json如果他们存在的话运行"npm install"安装所有新模块运行"npm start"

浏览器应打开您的库的根文件夹。确保检查库是否显示在本地UI5Lab浏览器中,并且通过检查所有入口点

浏览器::8080/测试资源/ui5lab/浏览器/索引.html

样品::8080/测试资源/openui5/视差/样本/视差.html

索引.json

确保此文件位于一个名为库名称空间的文件夹,在我的例子中是"test resources/openui5/parallax",否则该库将无法在浏览器中显示。稍后,我们计划去掉这个元数据文件并完全切换到包.json–但那是另一个故事。

视差.html

确保基本href正确。默认情况下,这是文件夹树的4倍,但在库中可能会有所不同,具体取决于命名空间。这一点非常重要,因为UI5Lab浏览器会将您的示例切换到从CDN加载UI5,并动态为您的库定义一个额外的资源路径。如果您没有定义一个合适的,该示例将在UI5Lab中心项目中失败。

4。发布新库版本

增加库中版本包.json(1.0.x表示您已切换到新的工具和约定)并在库上运行构建以在"dist"文件夹中创建库预加载和缩小文件

将迁移的库发布到npm

注意:如果您希望检查将发布的内容,车险返现,运行"npm pack"并首先检查创建的归档文件。在发布之前不要忘记删除生成的tgz文件,否则tgz文件也将被发布

将您的更改推送到GitHub。如果您选择不发布到npm,请不要忘记同时推送"dist"文件夹,以便将优化的资源加载到UI5Lab中心项目中。

5。更新UI5Lab central中的库依赖项

如果发布到npm,则需要编辑包.json在ui5labcentral项目中,将库更新为新版本。如果您发布到GitHub,请告诉我们或等待下一个构建运行。

包.json

如果您想确保一切正常,您可以按照中的说明在本地测试所有更改自述文件.md在UI5Lab central.

就是这样!创建一个pull请求,在我们查看您的更改时坐下来放松一下。

我希望本指南将有助于迁移您的库。如果您有问题,请跳到Slack channel#ui5lab并告诉我们。

如果您希望看到代码中的增量,请检查以下三个提交:

切换到新工具切换到新的UI5Lab基础设施样本中正确的资源路径

分享到:
收藏
相关阅读