插件 UI 可以作为作为服务提供接口及静态资源服务,也可以作为插件的配置管理界面使用。
参见:README
- 在上述
plugins
目录下创建新目录whistle.test-ui
,命令行进入该目录,执行lack init
创建项目。全部点回车即可,最后默认生成一个 UI Server 架子
- 添加 eslint,可以使用:https://github.com/imweb/eslint-config-imweb
- 安装依赖:
npm i
- 开启自动重启模式
lack watch
访问插件界面有以下三种方式:
-
直接通过 whistle 界面路径访问:
- http://local.whistlejs.com/whistle.test-ui/
- http://127.0.0.1:8899/whistle.test-ui/
- 其它可以访问 whistle 界面的 URL 即可(支持 HTTPS)
-
启动 whistle 时给命令行指定插件的域名(该域名 dns 要指向插件所在服务器)
w2 start -L "test-ui=test.xxx.com"
这样可以直接通过
http://test.xxx.com
访问插件界面(支持 HTTPS) -
通过特殊路径访问(支持任意URL)
/...whistle-path.5b6af7b9884e1165...///whistle.test-ui/
- https://www.baidu.com/...whistle-path.5b6af7b9884e1165...///whistle.test-ui/
- https://ke.qq.com/...whistle-path.5b6af7b9884e1165...///whistle.test-ui/xxx/inject.js
- https://www.test.com/...whistle-path.5b6af7b9884e1165...///whistle.test-ui/xxx/inject.js
- 可以注入到界面用相对路径:
<script src="/...whistle-path.5b6af7b9884e1165...///whistle.test-ui/xxx/inject.js"></script>
参考下 nohost 的构建:https://github.com/nohosts/nohost/tree/master/src/config