共计 1464 个字符,预计需要花费 4 分钟才能阅读完成。
本教程第 40 步骤,笔者介绍了如何制作 SAP UI5 利用可能部署到 Web 服务器上的 Release 版本 (或者称作 Distribution 版本),即如何用工具主动生成 component-preload.js 文件:
SAP UI5 利用开发教程之四十 – 如何制作蕴含了 component-preload.js 在内的 SAP UI5 公布版本
有读者现学现用,马上应用第九个步骤文件夹里的源代码做了尝试,然而却发现了问题:
为什么我将代码部署在了本地 tomcat 上,也把 dist 文件夹挪进去了,执行还是会加载两次 Component-preload.js,也会加载 Component.js,并且报错 404,应用的是第九篇教程 Component 的代码。报错:failed to load JavaScript resource: sap/ui5/walkthrough/Component-preload.js – sap.ui.ModuleSystem
本文笔者就带着大家一起来剖析这个问题。
问题剖析
首先咱们回顾一下步骤 40 介绍的常识:package.json 定义了名叫 build 的脚本,执行命令行为 ui5 build --clean-dest
:
于是咱们能够通过 npm run build
命令行来执行这个脚本,对 SAP UI5 利用源代码进行 build(构建):
胜利构建后,在当前目录生成一个 dist 文件夹:
dist 文件夹里蕴含有构建之后主动生成的 Component-preload.js
文件。大家仔细观察 dist 文件夹里的子文件夹,发现这些子文件夹都来自原来的 webapp
文件夹里的子文件夹。并且极其重要的一点:dist
文件夹上面,不再存在 webapp
这个文件夹了!请记住咱们察看到的这一点。
咱们把 dist 文件夹拷贝到 tomcat 的 webapps 文件夹下,启动 tomcat 服务器,通过 url http://localhost:8080/dist/
即可拜访这个构建之后的 SAP UI5 利用,也能察看到 Component-preload.js
文件被加载了。实际上,http://localhost:8080/dist/
指向的是 http://localhost:8080/dist/index.html
.
咱们再来到出问题的 09 文件夹。
为了不影响原始的 09 步骤,我把 09 文件夹一成不变地拷贝了一份,重命名为 09-build.
我在 09-build 文件夹下的 package.json
里也削减了一个 build
脚本,而后执行 npm run build
:
构建之后的 index.html 和 Component-preload.js 文件,呈现在构建后生成的 dist 文件夹的 webapp 文件夹内。
可想而知,当咱们把这个构造的 dist 文件夹拷贝到 tomcat 的 webapps 文件夹下时,咱们拜访 http://localhost:8080/dist/ 是不可能失常工作的,因为现在 index.html 是放在 /dist/webapp
上面,而不是像步骤 40 那样,间接放在 /dist/
上面。
就算咱们把拜访 tomcat 的 url,手动增加上 webapp
,即 http://localhost:8080/dist09/webapp/
(请疏忽这里的 dist22,我将步骤 40 的 dist 文件夹放到了 tomcat 的 webapps 文件夹,将 09-build 构建进去的 dist,重命名成 dist09,而后同样搁置到了 tomcat webapps 文件夹下),Component-preload.js 也没有方法胜利加载。
本文余下局部介绍这个问题的解决方案。