[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","nomagick","page",1,"limit",20,"total","id","37721","avatar_url","https://avatars.githubusercontent.com/u/565869?v=4","githubUsername","create_at","2019-07-28 08:39:16.529","score",75,"topic_count",0,"reply_count",15,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":34,"_31":50,"_51":52,"_25":53,"_54":55},"45899","author_id","41584","tab","share","content","话不多说，先放上截图和仓库地址：\r\n\r\n![QQ20210705-210753.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4319bf92bf64975872cc34c25078cec~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n代码仓库：[github](https://github.com/clouDr-f2e/rubick)\r\n\r\n## 故事背景\r\n### 网络抓包\r\n之前公司内部因为开发需要，需要和后端进行接口联调，测试环境的时候，经常会涉及到一些状态改变要看交互样式的问题。比如测试需要测商品的待支付、支付中、支付完成等各种节点的交互样式是否符合预期，这种情况测试一般会去造数据或者让后端改数据库接口。\r\n有的小伙伴可能会用`Charles`修改返回数据进行测试。但是`Charles`的抓包体验和配置体验感觉有点麻烦，不是很友好，所以我们自己做了个`抓包&mock`工具：\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbe19cfe19ff4fb099202c7a87addc7f~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n傻瓜式交互一次性解决：抓包、代理、请求转发、接口数据篡改mock、跨域访问等能力，并得到了广泛使用和好评。\r\n\r\n\r\n### 文件上传\r\n随着项目开发的继续，有些用户给我们反馈页面加载图片资源比较慢，我们看了一下很多图片资源都没有经过压缩处理，这个时候我们可以通过 `webpack` 写了一些 `loader` 来对图片资源进行压缩处理。这个时候我们的图片资源大部分是存放在项目目录下。而有的时候，我们是需要将图片存放于 `cdn` 上的，此时我们又需要一个图床工具，可以在线存储图片资源。于是乎，我们又整合了图片压缩和上传的功能，做了个图床工具：\r\n\r\n![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/542fcabe595740e19665e8f07edb3e99~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n### 性能测评\r\n开发者开发页面的时候，需要对页面的性能进行评估，另一方面也可以把评估报告通知给测试同学，对其进行性能测试。之前大多采用的是 `chrome` 插件 `lighthouse` 来做。但是这个东西对未登录用户无法做到性能评估，因为用户未登录直接测评了登录页面，显然不符合预期，其次，每个电脑上都得安装插件，受限于设备的不同，可能会导致性能没有同一的变量（网络、网速、分辨率、CUP等）。所以我们基于 `pupeeteer-core`以及`electron` 做了一个免登的测评工具：\r\n\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f2ce2d6baad343e49a2b589f1fc9f63a~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n但是这些还远远不够，我们随着业务的增加，功能愈发的多了起来：我们的埋点检测工具、需求管理工具、前端多环境切换工具等等等....一方面导致 `electron` 体积变得臃肿起来，另一方面随着发布频率增加，安装下载的成本也越来越大，很多用户就不愿意再接着安装，因为确实很麻烦。所以我们需要改变，让功能不依赖与容器。这就需要把我们的功能全部独立出去，做成**插件化**。所以我注意到了 [utools](https://u.tools/)\r\n\r\n## 插件化之旅\r\n一开始想到做插件化，无非就是使用 `electron` 的 `webview` 能力，实现类似于原生内嵌`h5`那样的方式，`h5` 页面可以做独立发布，原生提供 `nativaAPI` 之间通过 `jsBridge` 来桥接调用原生的方法。这样实现并无问题，我们也尝试了做了一次。最终思路大概是：\r\n\r\n### electron webview 方式\r\n#### 1. electron 中使用 webview\r\n\r\n```html\r\n\r\n```\r\n\r\n#### 2. 实现 `bridge`\r\n```js\r\n// preload.js\r\nwindow.rubickBridge = {\r\n sayHello() {\r\n console.log('hello world')\r\n }\r\n}\r\n```\r\n\r\n#### 3. 插件借助 `bridge` 调用 `electron` 的能力\r\n\r\n```html\r\n\r\n \r\n

这是一个插件

\r\n \r\n \r\n\r\n```\r\n\r\n#### 4. 通信\r\n因为 `proload.js` 是 `electron` 的 `renderer` 进程的，所以如果需要使用部分 `main` 进程的能力，则需要使用通信机制：\r\n```js\r\n// main process\r\nipcMain.on('msg-trigger', async (event, arg) => {\r\n const window = arg.winId ? BrowserWindow.fromId(arg.winId) : mainWindow\r\n const operators = arg.type.split('.');\r\n let fn = Api;\r\n operators.forEach((op) => {\r\n fn = fn[op];\r\n });\r\n const data = await fn(arg, window);\r\n event.sender.send(`msg-back-${arg.type}`, data);\r\n});\r\n \r\n// renderer process\r\nipcRenderer.send('msg-trigger', {\r\n type: 'getPath',\r\n name,\r\n});\r\nipcRenderer.on(`msg-back-getPath`, (e, result) => {\r\n console.log(result)\r\n});\r\n```\r\n### 为什么后来我们又放弃了这条路🤔 ？\r\n其实上面的思路大致是没啥问题的，我们也基于上面的思路成功把功能抽成了插件，按照插件的方式进行安装加载。直到我们注意到 `utools` 的强大，感觉 `utools` 的生态非常丰富，我们要是能集成 `utools` 的生成那该多好呀！所以我们秉持着干不过他就成为他的原则，我们尝试着成为他。但是 `utools` 本身并没有开源，所以没有办法去吸取一些优秀的代码实现，但是我们可以看他的官方文档。\r\n\r\n我们发现其实 `utools` 大多数插件都是和 `container` 层分离的，也就是说 `utools` 只是一个插件的容器，为插件提供了一些 `api` 能力和方法。所以一旦我们实现了`utools`加载插件的能力，实现 `utools` 的所有 `API` 函数，是不是就约等于实现了 `utools` ! 我们就可以使用 `utools` 的插件？\r\n\r\n### utools 方式\r\n按照 utools 的文档，首先我们需要实现一个插件，必须要有个 `plugin.json`，这玩意就是用来告诉 `utools` 插件的信息。我们也按照文档来写：\r\n```json\r\n{\r\n \"pluginName\": \"helloWorld\",\r\n \"description\": \"我的第一个uTools插件\",\r\n \"main\": \"index.html\",\r\n \"version\": \"0.0.1\",\r\n \"logo\": \"logo.png\",\r\n \"features\": [\r\n {\r\n \"code\": \"hello\",\r\n \"explain\": \"hello world\",\r\n \"cmds\":[\"hello\", \"你好\"]\r\n }\r\n ]\r\n}\r\n```\r\n接下来是将写好的插件用 `utools` 跑起来，按照 `utools`的交互是复制 `plugin.json` 到`utools`搜索框即可，我们也可以实现：\r\n\r\n```js\r\n// 监听 input change\r\n// 读取剪切板内容\r\nconst fileUrl = clipboard.read('public.file-url').replace('file://', '');\r\n// 复制文件\r\nif (fileUrl && value === 'plugin.json') {\r\n // 读取 plugin.json 配置\r\n const config = JSON.parse(fs.readFileSync(fileUrl, 'utf-8'));\r\n const pluginConfig = {\r\n ...config,\r\n // index.html 文件位置，用于webview加载\r\n sourceFile: path.join(fileUrl, `../${config.main || 'index.html'}`),\r\n id: uuidv4(),\r\n type: 'dev',\r\n icon: 'image://' + path.join(fileUrl, `../${config.logo}`),\r\n subType: (() => {\r\n if (config.main) {\r\n return ''\r\n }\r\n return 'template';\r\n })()\r\n };\r\n}\r\n```\r\n实现效果如下：\r\n\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b40162dd4c774a3ca6db2aa63c3606eb~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n接下来就是进行命令搜索插件:\r\n\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/236e9308fa324a3bac266ff7332cd1ab~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n实现这个功能其实也就是对之前存储的`pluginConfig`的里面的 `features` 进行遍历，找到相应的 `cmd` 后进行下拉框展示即可。\r\n\r\n然后我们要去实现选择功能，用 `webview` 加载页面的能力：\r\n```html\r\n\r\n\r\n```\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37cf1909b1374606bdd1fbae657433c7~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n到此结束了？并没有！！！由于篇幅的原因，我们后续再说。本出写的插件demo已上传github: https://github.com/clouDr-f2e/rubick-plugin-demo\r\n\r\n## Far from enough 这只是开始\r\n接下来我们就可以参考 `utools` 交互一口气实现其大部分功能：\r\n### 超级面板\r\n![image.png](//static.cnodejs.org/Fl-gy-iyc8sjhe0s9eOhJJRab8_M)\r\n\r\n\r\n### 加载utools生态插件\r\n斗图：https://github.com/vst93/doutu-uToolsPlugin\r\n\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cba1eb758180433294c93b59724adefd~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n### 窗口分离\r\n\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4de3a72c7244db898b2106b96c48416~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n### utools doc 模板\r\nuTools 的插件开发给予了开发者最大的自由度，你可以随心所欲的设计页面结构、样式、交互，对于特别擅长前端开发的同学，这没有什么问题，但对于非前端开发者，要做出漂亮的、高质量的前端 UI 是一件困难的事情。\r\n\r\n所以 Rubick 也实现了模板能力：\r\n\r\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1acf7f300d2490d99aa208080e00dad~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n### utools 自带的系统命令\r\n#### 取色\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c3e00e5f08545bcb96613689649b337~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n#### 截屏\r\n\r\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18023dab52e1420c9e87362cefddb2a1~tplv-k3u1fbpfcp-watermark.image)\r\n\r\n## 最后\r\n目前 `rubick` 已经实现 `utools` 大多数核心能力，**最重要的是可以使用 utools 所有生态！** 更多能力可以前往 github 体验。如果感觉有用，可以帮忙反手一个 star ✨\r\n\r\n[Rubick github](https://github.com/clouDr-f2e/rubick)","title","基于 Electron 我实现并开源了一个 uTools","last_reply_at","2021-08-17 02:22:32.275","good",true,"top",8,"visit_count",11642,"2021-07-07 01:30:39.811","author",{"_13":56,"_22":57},"muwoo","https://avatars.githubusercontent.com/u/21073039?v=4"]