完整electron+react項目框架搭建

electron初始項目搭建案例github；可用作初始化項目

1、環境搭建

//初始化項目xxx
npx create-react-app xxx		

//安裝electron
npm install electron --save-dev

創建main.js

const {app,BrowserWindow} = require('electron')

let mainWindow;

app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:1024,
        height:680,
        webPreferences:{
            nodeIntegration:true            //是指在render process中可以使用node
        }
    })
})

安裝electron-is-dev庫，判斷是否是開發環境

//安裝
cnpm install electron-is-dev --save-dev

//使用
const isDev = require('electron-is-dev')

 const urlLocation = isDev ? 'http://localhost:3000':'null';
 mainWindow.loadURL(urlLocation); 

注意：isDev判斷是否為開發環境；

• 開發環境就loadURL為localhost:3000
• 非開發環境：加載打包之后的靜態文件，這里先留存之后再修改

修改package.json

//添加main.js
 "main":"main.js",
 
 //添加electron啟動script
  "dev":"electron ."

查看electron環境

//開啟react的localhost:3000
npm start

//開啟electron
cnpm run dev

concurrently同步

指的是npm start和electron .同時進行

//安裝
cnpm install concurrently --save-dev

wait-on等待命令運行完

等待react的localhost:3000運行起來之后才去開始electron .

//安裝
cnpm install wait-on --save-dev

//package.json中將script的dev改成
   "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""

注意：concurrently是讓兩個命令同時執行；wait-on是等待localhost:3000加載完成之后再執行electron .，直接npm run dev就可以同時開啟瀏覽器和electron的GUI了

cross-env控制系統不開啟瀏覽器中的localhost:3000

//安裝
cnpm install cross-dev

//修改package.json
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""

注意：之后只開啟electron程序，並不會開啟localhost:3000

2、配置打包

electron-builder打包

//安裝electron-builder
cnpm install electron-builder --save-dev

//安裝webpack-cli
cnpm install webpack-cli --save-dev

//package.json中添加相關build配置
"build": {
    "appId": "smileyqp",
    "productName": "smileyqp",
    "copyright": "Copyright © 2019 ${author}",
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "extraMetadata": {
      "main": "./build/main.js"
    },
    "extends": null,
    "mac": {
      "category": "public.app-category.productivity",
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "dmg": {
      "background": "assets/smileyqp.jpg",
      "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": "unity-drive"
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
      "perMachine": false
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  
  

/** webpack配置
**	1、項目根目錄文件下touch一個webpack.config.js配置文件
**	2、寫相關配置並
**  3、package.json中添加webpack打包命令"buildMain": "webpack",
/**

const path = require('path')

module.exports = {
  target: 'electron-main',
  entry: './main.js',
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'main.js'
  },
  node: {
    __dirname: false
  }
}

//package.json中添加相關打包命令
		"buildMain": "webpack",
 		"pack": "electron-builder --dir",
    "dist": "electron-builder",
    "prerelease": "npm run build && npm run buildMain",
    "prepack": "npm run build && npm run buildMain",
    "predist": "npm run build && npm run buildMain"

 //修改main.js中的urlLocation不是開發環境的情況
 const urlLocation = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './index.html')}`

打包：打包命令sudo npm run dist打包成可執行文件（mac的可執行文件在dist/mac下面）；sudo npm run pack打包成安裝后的文件夾；

注意：打包配置過程中可能會出現一系列問題；配置過程中需要注意相關版本，會導致錯誤；以及build里面的icon路徑文件不存在也會導致打包出錯。