Electron+React+七牛云開發(fā)跨平臺(tái)云文檔

時(shí)間：2023-05-31 19:18:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-31 19:18:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Electron+React+七牛云開發(fā)跨平臺(tái)云文檔：

前言

采用了Electron+React+七牛云搭建的在線Markdown云文檔。

git clone git@github.com:FrontDream/cloud-doc.git

cd cloud-doc

npm install (切記在可以科學(xué)上網(wǎng)的情況下安裝，國(guó)內(nèi)即使用淘寶鏡像，雖然能運(yùn)行起來(lái)，打包也會(huì)失敗)

npm run dev (運(yùn)行)

npm run dist (打包)

npm run release (發(fā)布)

注意

• 運(yùn)行起來(lái)后，需要在菜單欄中打開設(shè)置中心，配置access_key，secret_key, bucket，才能同步到你自己的七牛云
• 當(dāng)需要release時(shí)，需要先確定package.json中的publish平臺(tái)，并在自己的package.json中設(shè)置發(fā)布平臺(tái)的GH_TOKEN

以下是從0到1的搭建過(guò)程，當(dāng)然，其中省略了中間的業(yè)務(wù)

搭建electron+React開發(fā)環(huán)境

• 拉取react腳手架代碼：npx create-react-app my-app
• 安裝electron: cnpm install electron --save-dev
• 項(xiàng)目根目錄下新建main.js，并且在package.json中增加"main"入口：

"main": "main.js",

• 安裝判斷是否是本地開發(fā)的小工具：cnpm install electron-is-dev

const { 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)})

• 安裝同時(shí)運(yùn)行兩個(gè)命令的包：npm install concurrently --save
• 修改package.json為如下，但是因?yàn)檫@是同時(shí)運(yùn)行的，但是正常來(lái)說(shuō)是前一個(gè)命令運(yùn)行起來(lái)，再運(yùn)行后一個(gè)命令

"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/"" }

• 因此需要再安裝一個(gè)小工具：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 ./"" },

• 但是這樣同時(shí)還會(huì)打開瀏覽器，為了不打開瀏覽器，可以設(shè)置BROWSER為none，但是有跨平臺(tái)的問(wèn)題，因此可以再安裝一個(gè)跨平臺(tái)的工具，用于設(shè)置環(huán)境變量：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 ./"" },

打包過(guò)程

• 安裝electron-builder: npm install electron-builder --save-dev
• 項(xiàng)目根目錄運(yùn)行npm run build
• 修改非開發(fā)環(huán)境下electron運(yùn)行的本地地址：const 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"

• 運(yùn)行npm run pack
• 報(bào)錯(cuò)
• 報(bào)錯(cuò)
• 報(bào)錯(cuò)
• 報(bào)錯(cuò)

配置安裝包

• 在package.json的build中配置打包過(guò)程中的靜態(tài)圖片,告訴electron-builder安裝包所需靜態(tài)文件的位置：

"directories": { "buildResources": "assets" },

• 在package.json的build中添加win,mac,linux的配置

"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 }

壓縮優(yōu)化體積

• 在安裝包中有一個(gè)app.asar是體積過(guò)大的主要罪魁禍?zhǔn)?，解壓后，發(fā)現(xiàn)其實(shí)就是package.json中build下files中的文件內(nèi)容。
• 優(yōu)化視圖層(react)。思路：在打安裝包之前，已經(jīng)通過(guò)npm run build將react相關(guān)的代碼，也就是視圖層的代碼，進(jìn)行了打包到build文件夾下，因此其實(shí)只需要將main.js中用到的包放在dependencies中就行了，剩余的包，移動(dòng)到devDependencies中。因?yàn)?code>electron-builder不會(huì)把devDependencies中的包打包進(jìn)應(yīng)用程序
• 優(yōu)化electron層。思路：通過(guò)新建webpack.config.js將main.js進(jìn)行打包，并配置，將main.js打包進(jìn)入build文件夾

如何release

• 在package.json中配置release的平臺(tái)為github，即在build中配置如何代碼

"publish": ["github"]

• 在GitHub中生成該項(xiàng)目所需要的access_key，并替換如下代碼you_access_key的對(duì)應(yīng)位置
• 在package.json中配置release命令并設(shè)置環(huán)境變量，如下：

"release": "cross-env GH_TOKEN=you_access_key electron-builder", "prerelease": "npm run build && npm run buildMain"

• npm run release即可。

版本自動(dòng)更新

• 安裝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: '應(yīng)用有新的版本', message: '發(fā)現(xiàn)新應(yīng)用，是否現(xiàn)在更新?', buttons: ['是','否'], },(buttonIndex)=>{ if(buttonIndex===0){ autoUpdater.downloadUpdate() } }) }) autoUpdater.on('update-not-available',()=>{ dialog.showMessageBox({ type: 'info', title: '沒(méi)有新的版本', message: '當(dāng)前已經(jīng)是最新版本', }) })?? 愛(ài)心三連擊
1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「在看」是我創(chuàng)作的動(dòng)力。
2.關(guān)注公眾號(hào)前端夢(mèng)想家，「一起學(xué)前端」！
3.添加微信【qdw1370336125】，拉你進(jìn)技術(shù)交流群一起學(xué)習(xí)。