安装nodejs
安装Yeoman
npm install -g yo
安装easy-ui5 generator
npm install -g yo generator-easy-ui5
创建一个文件夹作为工作空间,命名UI5Workspace
用NPM初始化工作空间
npm init -y
下载sapui5-runtime运行时环境
npm install -D sapui5-runtime
(可选项)安装指定的sapui5-runtime版本
如果要安装指定的sapui5-runtime版本,将以下代码加入到工作空间的package.json里
"sapui5-runtime": {
"version": "X.Y.Z"
}
从https://tools.hana.ondemand.com/选择一个有效的版本替换X.Y.Z
然后运行 npm rebuild
创建UI5项目
yo easy-ui5
修改UI5项目中的index.html
将src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"改为src="../../resources/sap-ui-core.js"
<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3" data-sap-ui-resourceroots='{
"com.myorg.myUI5App": "./"
}' data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" data-sap-ui-compatVersion="edge"
data-sap-ui-async="true" data-sap-ui-frameOptions="trusted">
</script>
添加自定义的UI5中间件来提供静态资源
npm install -D ui5-middleware-servestatic
在package.json添加UI5依赖
"ui5": {
"dependencies": [
"ui5-middleware-servestatic"
]
}
在ui5.yaml添加自定义中间件配置
server:
customMiddleware:
- name: ui5-middleware-servestatic
afterMiddleware: compression
mountPath: /resources
configuration:
rootPath: "./node_modules/sapui5-runtime/lib/resources"