Fiori-like Prototype ( UI5 Web C

UI5 Web Component 

UI5 Web组件与其他组件共享UI5的基本特质，提供企业级功能、Fiori 主题风格。其目标是实现UI5控件的简单应用，以降低在定制开发的应用中使用UI5控件的入门门槛，来避免UI5渲染栈的复杂性。总的来说，UI5 Web Components的目标用户是那些希望能更灵活地使用HTML标签或任意JS框架的Web开发者。

UI5 Web Components

Rollup.js 

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。

Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

Rollup.js

UI5 Web Components + Rollup starter

简单的 " hello world " 原型示例，展示了如何通过Rollup去使用和打包UI5 Web组件。

核心文件概述：

index.html

将所需的UI5 Web组件作为常规的HTML标签，并加载应用程序捆绑包。

html.index

bundle.esm.js

导入所需要加载的组件，如：import "@ui5/webcomponents/dist/<component_name>";

bundle.esm.js

rollup.config.js

Rollup.js 配置文件。

rollup.config.js

package.json

配置所需要的 NPM 依赖包

package.json

本地环境，部署测试。

npm install

npm install

npm run start

npm run start

本地环境演示示例：

Demo

http://localhost:5000

Hello, world

ZFiori Studio 体验地址：

ZFiori Studio ( UI5 + Rollup )

参考资料：

Petar Skelin Posted onApril 1, 2019 5 minute read The Fastest Way to Get Started with UI5 Web Components

UI5 Web Components + Rollup starter

Bootstrap layoutit

Build fast, responsive sites with Bootstrap