如果你想将现有的 SPA 应用迁移到 single-spa 框架中,需要做三件事:
- 创建一个single spa 配置
- 将 SPA 应用转换为注册应用
- 调整 html 文件,使 single-spa 配置生效,查看文档
将 SPA 应用转换为注册应用
你现有的 SPA 应用,无论是基于 Angular,React 还是其他技术,可能都无法从 DOM 中将自身卸载。而且,可能都是控制整个 html 页面,而不是一个不对<script>
标签和<link>
标签进行唯一控制的单纯 JavaScript 应用程序。因此,为了将它们转换为 single-spa 注册应用,需要在实现其生命周期功能时处理掉这些问题。
(1) 实现生命周期
请参阅注册应用的生命周期文档,以了解需要做什么。最难的部分可能就是 unmount
这个生命周期,因为大多数 SPA 都不会休眠并从 DOM 卸载自身。在实现生命周期功能时,请先查看生态系统文档。如果文档中没有列出你所使用的技术栈,则必须确保在你自己实现的 unmount
中,能够清理其 DOM 节点,DOM 事件侦听(所有的事件侦听,尤其是 hashchange
和 popstate
)以及释放内存。
(2) 使 CSS、字体和 <script>
等依赖生效
由于现有的 SPA 应用中, CSS、字体、第三方脚本等依赖都在 index.html 文件中,因此你可能必须做一些工作,以确保当你的 SPA 应用变成了无 HTML 应用程序之后,这些依赖可以正常工作。最好是将所有的资源都打包到 js 文件中,但是你也可以将所需要的资源列在single spa 配置中。
当前内容版权归 single-spa 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 single-spa .