Create-pandora-app NPM

create-pandora-app

pandora 应用模板生成工具

npx create-pandora-app <appName> --template <template>

npx create-pandora-app <appName> -t <template>

模版类型	内容	入口格式	使用方式	适用场景及优势
simple	简单 APP 模版，包含一个 APP 需要的基本配置和资源。	--	--	创建空的模版 APP
visualization	扩展 pandora 平台的可视化图表	umd 模块	--	需要自定义可视化图表，并添加到 pandora 平台。
view-html	【自定义 APP 的页面】html 为入口的 Web 应用	html 文件	`<html src="<file_name>.html" />`	完全独立的前端应用，适用于任意前端框架，支持 code split。缺点：运行在 iframe 环境中，iframe 本身存在一些缺陷，具体参考iframe 拓展应用的缺陷。
view-component	【自定义 APP 的页面】继承自`@qn-pandora/app-sdk.BaseComponent`组件。	umd 模块	`<custom-component src="<js_bundle_name>.js" />`	适用于任意前端框架。缺点：不支持 code split，且静态资源需要到包到 js bundle 中。
view-component-react	【自定义 APP 的页面】以 react 组件为入口的 react 单页应用	umd 模块	`<custom-component src="<js_bundle_name>.js" type="react" />`	react 框架开发应用，提供丰富的通用组件(`@qn-pandora/pandora-component`)和业务组件(`@qn-pandora/pandora-app-component`)，开发应用更高效。缺点：不支持 code split，且静态资源需要到包到 js bundle 中。

iframe 拓展应用的缺陷

url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

2 years ago

2 years ago

2 years ago

3 years ago