# react-electron **Repository Path**: Fx-wndy/react-electron ## Basic Information - **Project Name**: react-electron - **Description**: 模板采用 react-electron 构建 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 0 - **Created**: 2018-06-30 - **Last Updated**: 2021-12-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # electron-react ### **开发模板** 一直以来都是使用的官方模板脚手架去开发，总是想的自己也搞一套，体验下构建的乐趣。构建该模板是在论文答辩时期开始的，到今天为止才算构建完。 #### **模板架构：** 模板的主体框架采用了 **React + Mobx + Electron + Webpack4** 构建，用于开发 **electron跨平台应用** #### **模板优势：** 1、采用less构建css,postCss自动补全 2、热加载：支持组件热更新、Css热更新 -- 同时保留状态 3、使用electron-package 打包应用 4、使用Mobx进行数据管理，使其数据视图分离 5、增加mock功能，模拟后台数据接口 6、增加 二次封装的axios，进行ajax 7、采用webpack-dll的方式，加载长期不需修改的资源 8、动态加载 9、增加Electron应用更新功能，只需配置好下载地址即可 #### **目录规范** | 目录 | 说明| |---|---| | config | 构建Webpac的Dll加载配置文件夹| | ---- webpack.dll.config.js | Dll导出配置 | | ---- webpack.ruler.js | 模板无使用| | dist | 构建出来的WEB-应用目录，也是Electron打包的目录| | ElectronApp-* | 打包出来的Electron应用 | | node_modules | 安装的依赖目录 | | src | 项目开发目录-源码 | | ---- assets | 存放资源文件 css、image | | ---- mock | 模拟后台接口编写目录 | | ---- pages | 页面组件目录 | | ---- server | 二次封装axios 目录，以及api统一管理 | | ---- storge | mock状态管理目录 | | static | 静态目录，开封中无需变动的数据| | ---- config_js | 存放webpack-Dll打包出来的dll资源 | | ---- images | 存放图片资源，我在此处存放了Electron-ICON 图标 | | jsconfig.json | 解除Vscode对修饰器的警告 | ### --- ### 一、安装教程 1、克隆远程仓库到本地 ``` git clone https://gitee.com/Fx-wndy/react-electron.git ``` 2、安装模板依赖 ``` npm install ``` ### 二、使用说明 1、构建长期不需要进行修改的资源 ``` 在Config/webpack.dll.config.js文件中修改entry字段： entry: { react: ['react', 'react-dom','mobx','mobx-react'], }, 修改如上描述文件中的数组元素，在后续增加不需要改变的库 执行命令：npm run build:dll 进行构建。 构建出来的文件在static/config_js目录下。 ----------- 只需修改 ['react', 'react-dom','mobx','mobx-react'] 数组即可，无需进行其他操作，模板会去处理。 ``` 2、构建web-React应用 ``` 执行命令：npm run dev:react 执行完成后，打开 http://localhost:3000 即可看到WEB应用。 ``` 3、打包web-React应用 ``` 执行命令：npm run build 执行完成后，在 根目录/dist ,即可找到。 ``` 4、构建Electron应用 ``` 执行命令：npm run dev // (执行该命令是为了Webpack去处理你写的React代码以及electron的热加载，以及渲染 electron进程)。 再执行命令：npm run dev:electron // 执行完成后，即可弹出electron应用 ``` 5、打包Electron应用 ``` 在构建electron应用时，需要先把编写的React代码打包，才可以进行Electron打包。 执行命令：npm run build builder方案打包-执行命令：npm run build:win 执行完成后，即可在根目录中看到 Electron目录 ``` ### 三、Electron 生态 ```javascript // electron,相关配置信息 const AppInfo = { "updateApp":{ "uploadUrl":"http://127.0.0.1/verson/" }, "startApp":{ "devUrl":"http://localhost:3000/", "proUrl":path.join(__dirname,"dist/index.html"), } }; ``` #### 1、electron-packager 打包 ```javascript 打包命令： electron-packager . ElectronApp --platform=win32 --arch=x64 --icon=./dist/static/images/logo.ico --asar --ignore=\"(src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\" --overwrite ``` #### 2、electron-builder 打包-便捷 electron-builder打包指南 [使用手册](https://www.electron.build/configuration/configuration) ```javascript 使用本方案打包，需要在package.json 中增加，如下字段信息。 "build": { "productName": "electron", "appId": "com.youngzk.electron-react", "asar": false, "directories": { "output": "Electron" }, "files": [ "./dist/", "./main.js" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "win": { "icon": "./dist/static/images/logo.ico" } }, ``` ```javascript 打包命令： electron-builder --win ``` #### 3、electron-updater 自动更新 ```javascript 存放于 主线程中的 代码 // 更新事件 !function updateHandle() { let message = { error: '检查更新出错', checking: '正在检查更新……', updateAva: '检测到新版本，正在下载……', updateNotAva: '现在使用的就是最新版本，不用更新', }; const os = require('os'); const uploadUrl = AppInfo.updateApp.uploadUrl; // 下载地址，不加后面的.exe autoUpdater.setFeedURL(uploadUrl); autoUpdater.on('error', function (error) { sendUpdateMessage(message.error); }); autoUpdater.on('checking-for-update', function () { sendUpdateMessage(message.checking); }); autoUpdater.on('update-available', function (info) { sendUpdateMessage(message.updateAva); }); autoUpdater.on('update-not-available', function (info) { sendUpdateMessage(message.updateNotAva); }); // 更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { mainWindow.webContents.send('downloadProgress', progressObj) }); autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on('isUpdateNow', (e, arg) => { console.log(arguments); console.log("开始更新"); //some code here to handle event autoUpdater.quitAndInstall(); }); mainWindow.webContents.send('isUpdateNow') }); ipcMain.on("checkForUpdate",()=>{ //执行自动更新检查 autoUpdater.checkForUpdates(); }); }() // 通过main进程发送事件给renderer进程，提示更新信息 function sendUpdateMessage(text) { mainWindow.webContents.send('message', text) } ``` ```javascript 存放于 渲染进程中的 代码 updateApp = () => { ipcRenderer.send("checkForUpdate"); ipcRenderer.on("message", (event, text) => { console.log(arguments); //_this.tips = text; // alert(text) }); ipcRenderer.on("downloadProgress", (event, progressObj) => { console.log(progressObj); //_this.downloadPercent = progressObj.percent || 0; }); ipcRenderer.on("isUpdateNow", () => { ipcRenderer.send("isUpdateNow"); }); }; render() { return (); }; ``` ### 四、构建遇到的问题 #### 1、electron-builder 打包时 ICON 的问题 Error: image e:\react-electron\dist\static\images\logo.ico must be at least 256x256 解决方法：把ICON图标大小设置成256*256的，即可解决。 #### 2、electron-builder 打包时 package.json的问题 Error: Error: Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json. 解决方法：把 electron开头及相关的库，从package.json 中的dependencies字段移到devDependencies字段，即可解决。 #### 3、electron-builder 打包时 main.js 主进程 找不到的问题 Error: Application entry file "main.js" does not exist. Seems like a wrong configuration. 解决方法：在build."files": ["./dist/","./main.js"], 中加入路径即可。这里'./dist/'是打包出来的资源文件，'./main.js'是electron的主进程入口文件。 #### 4、electron-builder 打包时 出现 EBUSY 的情况 Error: EBUSY: resource busy or locked, unlink 'E:\nodejsproject\canvas\react-electron\Electron\win-unpacked\views_resources_200_percent.pak' 解决方法：任务管理器中，结束electron应用，重新打包即可。