Electron+React+七牛云开发跨平台云文档

前言

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

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_TOKEN

以下是从0到1的搭建过程，当然，其中省略了中间的业务

搭建electron+React开发环境

• 拉取react脚手架代码：npx create-react-app my-app
• 安装electron: cnpm install electron --save-dev
• 项目根目录下新建main.js，并且在package.json中增加"main"入口：

    "main": "main.js",

• 安装判断是否是本地开发的小工具：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)
})

• 安装同时运行两个命令的包：npm install concurrently --save
• 修改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\" \"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 .\""
  },

• 但是这样同时还会打开浏览器，为了不打开浏览器，可以设置BROWSER为none，但是有跨平台的问题，因此可以再安装一个跨平台的工具，用于设置环境变量：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-dev
• 项目根目录运行npm run build
• 修改非开发环境下electron运行的本地地址：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"

• 运行npm run pack
• 报错 (opens new window)
• 报错 (opens new window)
• 报错 (opens new window)
• 报错 (opens new window)

配置安装包

• 在package.json的build中配置打包过程中的静态图片,告诉electron-builder安装包所需静态文件的位置：

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

压缩优化体积

• 在安装包中有一个app.asar是体积过大的主要罪魁祸首，解压后，发现其实就是package.json中build下files中的文件内容。
• 优化视图层(react)。思路：在打安装包之前，已经通过npm run build将react相关的代码，也就是视图层的代码，进行了打包到build文件夹下，因此其实只需要将main.js中用到的包放在dependencies中就行了，剩余的包，移动到devDependencies中。因为electron-builder不会把devDependencies中的包打包进应用程序
• 优化electron层。思路：通过新建webpack.config.js将main.js进行打包，并配置，将main.js打包进入build文件夹

如何release

• 在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: '当前已经是最新版本',
        })
    })

❤️ 爱心三连击

1.看到这里了就点个在看支持下吧，你的「在看」是我创作的动力。

2.关注公众号前端梦想家，「一起学前端」！

3.添加微信【qdw1370336125】，拉你进技术交流群一起学习。