electron-react-umi模板

electron-react-umi-tpl

github
English Version

更新日志：

1. 2020-06-08 添加全量更新功能
2. 2020-06-29 添加遠程增量更新功能，無需下載包來重新安裝更新；
3. 2020-07-27 優化初始化客戶端loading等待頁面，優化頁面
   中文
   English Version

electron 8.2 + umi 3.1 + typescript react 16.12 + redux + antDesign 4.0 + eslint tslint react-tslint腳手架, 下載即用，已經為你做好了基座設施

客戶端集成:

• [x] 自動更新(electron-builder)
• [x] 托盤菜單 app啟動loading加載條
• [x] electron打印(electron 5.0以上支持)
• [x] electron-log 本地日志 electron-store 本地存儲
• [x] app打包圖標 添加增量更新
• [x] 添加redux-devtools插件
• [x] app崩潰信息采集
• [x] app消息通知，快捷鍵等

web端:

1. 基於umi腳手架，基礎配置已集成，開發者關注業務代碼編寫即可
2. 本地存儲redux(redux-saga)
3. antDesign >= 4.0
4. iconfont圖標

• 菜單配置 src/layouts/menu/config.tsx

TODOLIST: 1. node Api功能封裝與渲染進程業務解耦

開啟

npm i
npm start
npm run pack // 默認根據當前系統打包
npm run pack-mac // 打包mac平台
npm run pack-windows // 打包windows平台
npm run pack-all // 打包所有平台

目錄樹

|-- project
    |-- .editorconfig
    |-- .eslintrc.js
    |-- .gitignore
    |-- .gitlab-ci.yml
    |-- .prettierignore
    |-- .prettierrc.js
    |-- directoryList.md
    |-- package-lock.json
    |-- package.json
    |-- README.md
    |-- tsconfig.json
    |-- typings.d.ts
    |-- eslint-rules 自定義eslint配置
    |   |-- base.js
    |   |-- react.js
    |   |-- ts.js
    |-- src
        |-- main 主進程
        |   |-- app-update.yml 生產環境自動更新配置
        |   |-- bundle.js 自動生成
        |   |-- bundle.js.map
        |   |-- dev-app-update.yml 開發環境自動更新配置
        |   |-- index.js 入口
        |   |-- loading.html
        |   |-- preload.js
        |   |-- README.md
        |   |-- config 編譯配置
        |   |   |-- config.js
        |   |   |-- webpack.config.js
        |   |-- controls 控制集
        |   |   |-- AppAutoUpdater.js
        |   |   |-- AppMainWindow.js
        |   |   |-- AppTray.js
        |   |   |-- electron-helper.js
        |   |-- print 打印
        |   |   |-- print.html
        |   |   |-- print.js
        |   |-- public 附件
        |   |   |-- icon.ico
        |   |   |-- icon.png
        |   |   |-- tray.png
        |   |-- script 編譯腳本
        |       |-- build.js
        |-- render 渲染進程
            |-- .env
            |-- .umirc.ts
            |-- app.ts
            |-- global.less
            |-- README.md
            |-- .umi umi自動生成配置和插件等
            |   |-- umi.ts
            |   |-- core
            |   |-- plugin-dva
            |   |-- plugin-initial-state
            |   |-- plugin-model
            |   |-- plugin-request
            |-- api 接口集合
            |   |-- api.list.ts
            |-- assets 附件
            |   |-- image
            |   |   |-- yay.jpg
            |   |-- style
            |       |-- bootstrap-part.less
            |       |-- common.less
            |-- common 通用
            |   |-- enum.ts
            |   |-- global.ts
            |-- components 組件
            |   |-- readme.md
            |   |-- AutoUpdate
            |   |   |-- index.tsx
            |   |   |-- style.less
            |   |-- FormCps
            |   |   |-- index.tsx
            |   |   |-- readme.md
            |   |-- TableCps
            |       |-- index.tsx
            |       |-- readme.md
            |-- config 配置
            |   |-- iconfont.ts
            |   |-- menus.tsx
            |-- dist 本地打包生成文件
            |-- layouts 布局
            |   |-- index.less
            |   |-- index.tsx
            |   |-- header
            |   |   |-- index.less
            |   |   |-- index.tsx
            |   |-- loading
            |   |   |-- index.less
            |   |   |-- index.tsx
            |   |-- menu
            |       |-- index.less
            |       |-- index.tsx
            |-- mock
            |   |-- foo.ts
            |-- models redux
            |   |-- xxStore.ts
            |-- pages
            |   |-- home.normal.less
            |   |-- index.tsx
            |   |-- Foo 示例
            |   |   |-- index.tsx
            |   |   |-- components
            |   |   |   |-- TableList.tsx
            |   |   |-- models
            |   |   |   |-- foo.ts
            |   |   |-- services
            |   |       |-- foo.ts
            |   |-- Home 業務
            |       |-- Edge
            |       |   |-- index.tsx
            |       |-- Settings
            |           |-- index.tsx
            |-- utils 工具集

eslint

默認開啟alloy配置
eslint-config-alloy

log

• 本地調試日志

const log = require('electron-log');
// log.transports.file.file = 'xx/record.log' 本地可指定文件
// 默認日志存放
// on Linux: ~/.config/{appName}/log.log
// on macOS: ~/Library/Logs/{appName}/log.log
// on Windows: user\AppData\Roaming\{appName}\log.log
log.info('Hello, log');
log.warn('Some problem appears');

注意事項

1. 下載依賴和打包運行錯誤，請用cnpm或者配置npm config的electron ERROR路徑
2. 任何地方的component文件夾名不可首字母大寫 會被umi識別為路由而影響熱加載等
3. 卡在node install.js : npm config edit 添加：electron_mirror="https://npm.taobao.org/mirrors/electron/"
4. 下載electron 8.2一直失敗，請刪除包，然后安裝全局的8.2版本的electron即可
5. 最新版本electron也可以嘗試，求穩本地用8.2.0

參考

(官方electron文檔)[https://www.electronjs.org/docs]
(官方umi文檔)[https://umijs.org/]

github