Web 前端项目如何和 Electron 项目共享代码?

145 天前
 abcbuzhiming
已有基于 Web 的客户端项目正在运行。是功能比较复杂的 UI 类型程序,而不是一般的那种偏展示的 web 页面。

现在老板要求必须打包一个客户端出来,说浏览器逼格不够,要 App 才好让他出去宣(骗)传(投资),使用体验和 web 完全相同,那只能用 Electron 了。

但是这个 UI 程序确实写的比较复杂,页面,布局,交互的代码都挺多的。当然它没有什么原生 api 负担,因为基本都是在和后台服务器交互,不需要依赖本地操作系统 API 。
我看了一下 Electron 的开发流程,我感觉这东西的脚手架和 Web 端还是有那么点不一样。我原本想的好事是一份代码,想打包成 web 端可以,想打包成 Electron 也可以。但是实际上似乎没法这么干。能查到的办法都是必须建立 Electron 的脚手架,然后把 web 那些的代码拷一份过来,然后再调整调整。

我现在的主要担心是,如果复制成两份代码,很可能后面迭代几个版本就走样了,毕竟这程序功能挺多挺杂的,web 端和 Electron 端程序的功能很直接就分裂了。并且很不好弥合。

有没有什么办法,能让它们共享代码呢?
1067 次点击
所在节点    前端开发
10 条回复
renmu
145 天前
完全不用,你打包完,electron 加载一下 html 就可以了
abcbuzhiming
145 天前
@renmu 不太理解这是什么操作,electron 可以从本地加载打包后的 web 项目的静态资源吗?还是说你的意思是直接从远程服务器加载?把 electron 直接当浏览器用?
nieyujiang
145 天前
electron 单独抽一个工程出来,然后就在上面放个 webview 之类的,加载一下在线的页面.完事以后基本上不用改,反正所有的逻辑都是页面内部的.
renmu
145 天前
@abcbuzhiming 可以啊,如果这都不想做,那就直接加载线上页面,不需要额外适配
maichael
145 天前
虽然已经 archived ,https://github.com/nativefier/nativefier 应该能满足你的需求
不过也可以简单通过 mainWindow.loadURL 之类的方式来实现这个需求,Electron 本质上是个浏览器 + Node.JS runtime ,所以是可以加载 url 的。
hengcheng
145 天前
aaniao002
145 天前
chrome -app 模式怎么样? 打包一下 chrome 写个启动就行。
LongMaoz
145 天前
没有客户端 API 交互需求的话 直接加载远程 url 不就行了
musi
145 天前
1. 可以 loadUrl 加载线上地址
2. 可以用 monorepo 将 electron 和 web 放到一个存储库编写对应的构建脚本进行构建
3. 可以用 git submodule 实现两个仓库共用一份 web 代码
webszy
145 天前
不太理解。。。你就新建一个一个 electron 项目,然后写代码的时候可以通过环境变量来控制逻辑,比如 if ( electron ) xxx ,然后两条打包命令分别打包不就行了。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1060088

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX