技术栈:Electron React Reselect TypeScript Nedb Socket.io 样式使用 CSS in JS 方案: styled-component
关于 [email protected] 版本
由于 React devtools 和 Redux devtools 在 Electron 8 以上版本不能使用,目前没有找到解决方法,直到 12 问题依旧,故 Electron 版本锁定 8 最后一个版本 8.5.5
Redux 插件不太好使,好在可以不用,Redux 换为 Recoil
关于 [email protected] 版本
目前 webpack 5 还有不少坑,暂时锁定 webpack 4 版本使用 以下包(或类型)严格按照版本使用,因为其内部会指定 webpack ^5,会导致类型报错甚至无法运行 稳定后升 webpack5
- mini-css-extract-plugin @1.4.0
- @types/mini-css-extract-plugin @1.4.0
- postcss-loader @4.3.0
- node-loader @1.0.3
- html-webpack-plugin @4.5.2
- 其他参照 package.json
- 特别注意的在这里补充,不要乱升
- 升的时候选择 fixable,然后删 node_modules 测试
参考 https://www.electronjs.org/zh/docs/latest/tutorial/using-native-node-modules
- 直接安装,但是 abi 和 electron abi 不同导致无法启动,暂时无解
- npm install --save canvas --canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/
- 手动编译 (靠谱方案)
- brew install pkg-config cairo pango libpng jpeg giflib librsvg
- cd node_modules/canvas
- HOME=~/.electron-gyp ../node-gyp/bin/node-gyp.js node-gyp rebuild --target=8.5.5 --arch=x64 --dist-url=https://electronjs.org/headers
配合 electron node 版本,rebuild 原生 node 模块,或 build 的时候,以及 webpack 等本地环境要求。 但运行时是使用的 electron node 版本,所以进程中只要满足 electron node 版本即可 image-size >=12 electron-builder >=14 log-symbols >=14
npm install
npm run webpack:dll
# 启动主程序
npm start
# 启动服务
npm run start:server
npm run start
npm run build:mac
npm run build:win32
npm run build:win64
npm run build:linux
-
尝试使用淘宝源或其他
-
使用缓存 添加环境变量:electron_config_cache="./cache"
参考:https://www.electronjs.org/docs/tutorial/installation
- src
- common 通用文件
- data 数据模型
- ipc ipc 通讯封装
- main electron 主进程
- index.ts 入口
- database/ 数据库
- singletons/ 单例
- menu.ts 菜单
- protocol.ts 自定义协议
- windowManager.ts 窗口管理
- preload 预加载脚本
- index.ts
- renderer 渲染进程(react)
- components 基础组件(不应包含业务,业务组件在 views 中封装)
- views 多页面/路由
- project-editor 编辑器页面
- components 业务组件(处理业务组件,和基础UI组件分离)
- project-manager 工程管理
- components
- project-editor 编辑器页面
- store 数据管理(redux/recoil)
- script python/c++等处理脚本
- webpack
- config.main.ts - 主进程 webpack 配置
- config.renderer.ts - 渲染进程 webpack 配置 ...