Giter Club home page Giter Club logo

electron-react-tpl's Introduction

electron-react-umi-tpl

github English Version

体验: 下载

相对纯净模板,请戳这里(待维护),无umi更自由,热加载更快
TODO
  1. web+cdn版本,便于web服务器部署;

更新日志:

  1. 2020-06-08 添加全量更新功能
  2. 2020-06-29 添加远程增量更新功能,无需下载包来重新安装更新;
  3. 2020-07-27 优化初始化客户端loading等待页面,优化页面
  4. 2020-08-18 添加选中复制右键黏贴 | 自定义功能
  5. 2020-08-24 优化win7部分系统白屏(win7关闭硬件加速)
  6. 2020-08-28 添加koa2 + typescript + websocket + redis + log4js服务端websocket|redis功能,客户端socket.io
  7. 2020-09-20 新增错误边界识别和处理(页面中遇到React语法等报错后,自动捕捉记录错误日志,页面返回首页,开发模式默认关闭,生产环境开启)
  8. 2020-10-16 新增 限制只允许应用单开/单实例
  9. 2020-11-05 修复增量更新问题,优化部分代码,移除旧版打印,新增cli工具命令行启动
  10. 2021-02-02 修复eslint, tslint问题
  11. 2021-03-29 新增主进程HRM功能,修改主进程可以重新reload客户端
  12. 2022-01-19 升级electron版本到12,修复升级引出的问题(又是瞎忙的一年..)
  13. 2022-02-21 加入本地数据持久化sqlite + sequelize,分支:feature/add_sqlite_20220209

中文 English Version

electron 12 + umi 3.2 + typescript + react 16.12 + redux + antDesign 4.0 + eslint tslint react-tslint脚手架, 下载即用,已经为你做好了基座设施

客户端集成:

  • 自动更新(electron-builder)
  • 托盘菜单 app启动loading加载条
  • electron-log 本地日志 electron-store 本地存储
  • app打包图标 添加增量更新
  • 添加redux-devtools插件
  • 右键复制黏贴
  • app崩溃信息采集
  • app消息通知,快捷键等

web端:

  1. 基于umi脚手架,基础配置已集成,开发者关注业务代码编写即可
  2. 本地存储redux(redux-saga)
  3. antDesign >= 4.0
  4. iconfont图标
  • 菜单配置 src/layouts/menu/config.tsx

Fix:

  • 升级到electron9.1.0,同步官方
  • 部分win7白屏解决方案
  • 待修复sqlite打包问题
  • node Api功能封装与渲染进程业务解耦

Next Feature

  • 基于create-react-app的版本

工具命令行启动

> npm i -g maple-react-cli // 全局安装cli工具
> maple-react-cli // 初始化

? 请选择您接下来的操作 选择模板类型
? 选一个项目模板来初始化您的项目~
✔ electron-react-tpl
✔ 初始化中..
✔ 准备拉取代码...
? 请输入您本地初始化的项目名~ 输入自定义项目名,如project
✔ 拉取代码成功
✔ 安装依赖成功~
? 是否运行项目? yes
恭喜~项目启动成功~请稍候...

cli工具

本地开启

npm i // 安装不成功请用yarn
npm start
npm run pack // 默认根据当前系统打包
npm run pack-mac // 打包mac平台
npm run pack-windows // 打包windows平台
npm run pack-all // 打包所有平台

// 如果需要开启websocket

cd ./server
npm run dev

目录树

|-- 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
        |   |-- 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
            |       |-- WebSocket
            |           |-- index.tsx
            |-- utils 工具集

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 一直失败,请删除包,然后安装全局的12版本的electron即可
  5. umi版本随着业务量增大,tsx数量暴涨后,热加载效率会变低,可以尝试配置路由而不选用动态路由
// .umirc.ts
const routes = [] // 自定义路由,来自src/render/.umi/core/routes.ts
routes: closeFlexRoute ? routes : undefined,

参考

(官方electron文档)[https://www.electronjs.org/docs] (官方umi文档)[https://umijs.org/] (electron9版本升级到12)[https://www.cnblogs.com/mapleChain/p/15823267.html]

能提供开发思路或者学习的话,麻烦给一颗卑微的星星star~谢谢 补充或者建议请提issue

github

附录

update update1

electron-react-tpl's People

Contributors

qld-cf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

electron-react-tpl's Issues

最好plugin化

代码暴露太多了,最好可以做成一个plugin,在umi 中做集成。这样的受众用户可能会更多一些

.node文件打包问题

webpack.main.js中对.node文件写了单独的loader:打包后的应用从/aclas-addons路径引用对应的模块
求教项目中的.node文件是怎么打包至/aclas-addons路径的呢?

win10 npm start 启动报错

[electron] scripts/main-build.js � Electron webpack 相关报错
[electron] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
[electron] at validateString (internal/validators.js:117:11)
[electron] at Object.join (path.js:375:7)
[electron] at D:\moushi\desktop_im\scripts\main-build.js:32:13
[electron] at Hook.eval [as callAsync] (eval at create (D:\moushi\desktop_im\node_modules\tapable\lib\HookCodeFactory.js:33:10), :7:1)
[electron] at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\moushi\desktop_im\node_modules\tapable\lib\Hook.js:18:14)
[electron] at D:\moushi\desktop_im\node_modules\webpack\lib\Compiler.js:1114:33
[electron] at finalCallback (D:\moushi\desktop_im\node_modules\webpack\lib\Compilation.js:2249:11)
[electron] at D:\moushi\desktop_im\node_modules\webpack\lib\Compilation.js:2540:11
[electron] at Hook.eval [as callAsync] (eval at create (D:\moushi\desktop_im\node_modules\tapable\lib\HookCodeFactory.js:33:10), :4:1)
[electron] at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (D:\moushi\desktop_im\node_modules\tapable\lib\Hook.js:18:14) {
[electron] code: 'ERR_INVALID_ARG_TYPE'
[electron] }
[electron] scripts/main-build.js Watching Ended.

npm run dev:web启动后无法访问页面

npm run dev:web
可以正常启动
访问localhost:9090报错 错误如下

ReferenceError: require is not defined
url
webpack:/external "url":1
module.exports = require("url");

url_error

增量更新

增量更新为什么在最后finally中还需要将back给改回来

打包失败,报错The name of the file cannot be resolved by the system.,这是什么问题??

image

⨯ open F:\patent-service-ui-electron\node_modules\umi\node_modules@umijs\preset-built-in\node_modules\joi2types\node_modules\json-schema-to-typescript\node_modules\cli-color\node_modules\memoizee\node_modules\event-emitter\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\package.json: The name of the file cannot be resolved by the system.
github.com/develar/app-builder/pkg/node-modules.(*Collector).resolveDependency
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:192
github.com/develar/app-builder/pkg/node-modules.(*Collector).processDependencies
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:95
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:56
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
github.com/develar/app-builder/pkg/node-modules.(*Collector).readDependencyTree
Y:/Documents/app-builder/pkg/node-modules/nodeModuleCollector.go:72
⨯ F:\patent-service-ui-electron\node_modules_app-builder-bin@3.5.10@app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE stackTrace=
Error: F:\patent-service-ui-electron\node_modules_app-builder-bin@3.5.10@app-builder-bin\win\x64\app-builder.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

.node addon app not load

load thirdpart node addon failed
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

bug:在win10 + wsl2环境运行错误

win10 + wsl2(ubuntu 20.04) + x410
会一直抛同一个错误
报错信息:

[umi] (node:739) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 97)
[umi] (node:739) UnhandledPromiseRejectionWarning: AssertionError [ERR_ASSERTION]: chunk of umi not found.
[umi]     at /home/saltfish/dkgy/maple-electron/node_modules/@umijs/preset-built-in/lib/plugins/commands/htmlUtils.js:104:27
[umi]     at Array.forEach (<anonymous>)
[umi]     at chunksToFiles (/home/saltfish/dkgy/maple-electron/node_modules/@umijs/preset-built-in/lib/plugins/commands/htmlUtils.js:93:14)
[umi]     at /home/saltfish/dkgy/maple-electron/node_modules/@umijs/preset-built-in/lib/plugins/commands/htmlUtils.js:188:32
[umi]     at Generator.next (<anonymous>)
[umi]     at asyncGeneratorStep (/home/saltfish/dkgy/maple-electron/node_modules/@umijs/preset-built-in/lib/plugins/commands/htmlUtils.js:62:103)
[umi]     at _next (/home/saltfish/dkgy/maple-electron/node_modules/@umijs/preset-built-in/lib/plugins/commands/htmlUtils.js:64:194)
[umi]     at runMicrotasks (<anonymous>)
[umi]     at processTicksAndRejections (internal/process/task_queues.js:97:5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.