时间：2023-05-31 19:18:02 | 来源：网站运营
时间：2023-05-31 19:18:02 来源：网站运营
Electron+React+七牛云开发跨平台云文档：git clone git@github.com:FrontDream/cloud-doc.git注意
cd cloud-doc
npm install (切记在可以科学上网的情况下安装，国内即使用淘宝镜像，虽然能运行起来，打包也会失败)
npm run dev (运行)
npm run dist (打包)
npm run release (发布)
在线咨询
access_key，secret_key, bucket，才能同步到你自己的七牛云release时，需要先确定package.json中的publish平台，并在自己的package.json中设置发布平台的GH_TOKENnpx create-react-app my-appcnpm install electron --save-devmain.js，并且在package.json中增加"main"入口： "main": "main.js",cnpm install electron-is-devconst { app ,BrowserWindow } = require('electron')const isDev = require('electron-is-dev')let mainWindow;app.on('ready',()=>{ mainWindow = new BrowserWindow({ width: 1024, height: 680, webPreferences: { nodeIntegration: true } }) const urlLocation = isDev?'http://localhost:3000': 'ddd' mainWindow.loadURL(urlLocation)})npm install concurrently --savepackage.json为如下，但是因为这是同时运行的，但是正常来说是前一个命令运行起来，再运行后一个命令"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "ele": "electron .", "dev": "concurrently /"npm start/" /"npm run ele/"" }cnpm install wait-on --save-dev。并修改package.json如下："scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "ele": "electron .", "dev": "concurrently /"npm start/" /"wait-on http://localhost:3000 && electron ./"" },cnpm install cross-env --save-dev,并修改package.json修改为如下： "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "ele": "electron .", "dev": "concurrently /"cross-env BROWSER=none npm start/" /"wait-on http://localhost:3000 && electron ./"" },electron-builder: npm install electron-builder --save-devnpm run buildconst urlLocation = isDev?'http://localhost:3000':file://${path.join(__dirname, './build/index.html')}package.json中添加基本配置，package.json第一层添加如下代码："author": { "name": "qiandingwei", "email": "1370336125@qq.com"},"build": { "appId": "cloudDoc", "productName": "七牛云文档", "copyright": "Copyright © 2020 ${author}" },script中添加："pack": "electron-builder --dir","prepack": "npm run build","dist": "electron-builder"npm run pack"directories": { "buildResources": "assets" },"mac": { "category": "public.app-category.productivity", "artifactName": "${productName}-${version}-${arch}.${ext}" }, "dmg": { "background": "assets/appdmg.png", "icon": "assets/icon.icns", "iconSize": 100, "contents": [ { "x": 380, "y": 280, "type": "link", "path": "/Applications" }, { "x": 110, "y": 280, "type": "file" } ], "window": { "width": 500, "height": 500 } }, "win": { "target": [ "msi", "nsis" ], "icon": "assets/icon.ico", "artifactName": "${productName}-Web-Setup-${version}.${ext}", "publisherName": "Viking Zhang" }, "nsis": { "allowToChangeInstallationDirectory": true, "oneClick": false, "perMachine": false }app.asar是体积过大的主要罪魁祸首，解压后，发现其实就是package.json中build下files中的文件内容。npm run build将react相关的代码，也就是视图层的代码，进行了打包到build文件夹下，因此其实只需要将main.js中用到的包放在dependencies中就行了，剩余的包，移动到devDependencies中。因为electron-builder不会把devDependencies中的包打包进应用程序electron层。思路：通过新建webpack.config.js将main.js进行打包，并配置，将main.js打包进入build文件夹package.json中配置release的平台为github，即在build中配置如何代码 "publish": ["github"]GitHub中生成该项目所需要的access_key，并替换如下代码you_access_key的对应位置package.json中配置release命令并设置环境变量，如下："release": "cross-env GH_TOKEN=you_access_key electron-builder", "prerelease": "npm run build && npm run buildMain"npm run release即可。npm install electron-updater --save-dev并在main.js中引入：const { autoUpdater} = require('electron-updater')autoUpdater.autoDownload = false autoUpdater.checkForUpdatesAndNotify() autoUpdater.on('error',(error)=>{ dialog.showErrorBox('Error',error===null?"un-known":error) }) autoUpdater.on('update-available',()=>{ dialog.showMessageBox({ type: 'info', title: '应用有新的版本', message: '发现新应用，是否现在更新?', buttons: ['是','否'], },(buttonIndex)=>{ if(buttonIndex===0){ autoUpdater.downloadUpdate() } }) }) autoUpdater.on('update-not-available',()=>{ dialog.showMessageBox({ type: 'info', title: '没有新的版本', message: '当前已经是最新版本', }) })❤️ 爱心三连击关键词：平台
