Web App 插件
此教程将引导您创建一个基本的Steedos Web插件。
什么是Web App 插件
它是华炎魔方项目的前端插件,通过在华炎魔方项目中创建一个Web App项目的方式来开发前端插件。
Web App 插件有什么功能
可以通过调用全局函数window.registerPlugin注册Web App 插件,并在插件内调用各种注册组件函数来实现重写或增强现在华炎魔方项目中已有的UI界面,比如重写门户界面、重写某个对象的首页等。
创建插件项目
创建并跳转到webapp文件夹。
初始化插件项目
创建一个 package.json 文件
安装依赖包
给package.json中添加一个名为build的script,用于webpack打包
最后package.json大概内容:
{"name": "steedos-demo-webapp","version": "1.0.0","license": "MIT","private": true,"scripts": {"build": "yarn webpack --mode=production"},"devDependencies": {"@babel/core": "^7.6.4","@babel/preset-env": "^7.6.3","@babel/preset-react": "^7.6.3","babel-loader": "^8.0.6","webpack": "^4.41.2","webpack-cli": "^3.3.9"},"dependencies": {"react": "^16.12.0","@steedos/react": "^1.14.17"}}
配置 webpack
注意
react
、react-dom
等包被指定为外部包. 这样你可以在本地测试代码 (e.g. with jest and snapshots) ,但是并不会影响到 Steedos 打包的react版本,并且最后也不会输出到webapp.client.js
文件中,可以有效减少打包后文件大小。
注册插件
编辑 src/index.jsx
,写入以下内容:
以上代码注册了一个hellow-world插件,并且该插件调用了
registerObjectHomeComponent
,注册了一个组件显示为hello_world_object
这个对象的首页。关于registerObjectHomeComponent及更多插件函数说明请移步:Web App 插件函数。
打包 Webapp
生成打包文件,以便安装到项目中。
或
正如
webpack.config.js
配置的output
,打包后会把index.jsx
文件内容压缩写入到webapp.client.js
文件中,这也是Webapp插件引入华炎魔方项目的方式。
插件配置
部分Web App 插件函数需要配合相关配置才能生效,比如上面示例中提到的registerObjectHomeComponent
函数,就需要额外在项目根目录的src文件夹下配置一个对象*.object.yml
文件,且该对象需要配置到某个app的objects属性中才能被看到,请参考:registerObjectHomeComponent。
插件测试
重新启动 Steedos服务,测试插件效果。
注意每次修改
index.jsx
文件后,都需要执行yarn build
打包才能生效
插件效果预览
以上插件示例运行后效果图如下: