electron 集成react

1、创建react项目
npx create-react-app 项目名称

2、安装electron
cnpm i electron --save

3、在package.json 中添加
“main”: “main.js”,
“homepage”: “.”,

4、在package.json的script中添加脚本命令
“electron-dev”: “electron . dev”,
“electron”: “electron .”,

这里一个是使用electron运行开发时候的脚本加了 dev的参数，后面会根据传入的这个参数，在主进程中做一层判断
如果是开发环境的话，那么主进程loadURL就会加载 http://localhost:3000/地址
如果是打包之后的环境就会加载打包文件夹的地址（这里打包是放在build文件夹下，所以会加载’./build/index.html’地址）

5、与package.json同级添加main.js文件

// Modules to control application life and create native browser window
const {app,Menu, BrowserWindow,BrowserView,globalShortcut,ipcMain} = require('electron')
const path = require('path')
const url = require('url');

// 获取在 package.json 中的命令脚本传入的参数，来判断是开发还是生产环境
const mode = process.argv[2];

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    //弹出的窗口有无边框,默认为有
    // frame:false,
    show:false,
    backgroundColor:'#586148',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true,
      webviewTag:true
    },
  })

  // and load the index.html of the app.
  //mainWindow.loadFile('index.html')
  
  //判断是否是开发模式 
  if(mode === 'dev') { 
    mainWindow.loadURL("http://localhost:3000/")
  } else { 
    mainWindow.loadURL(url.format({
      pathname:path.join(__dirname, './build/index.html'), 
      protocol:'file:', 
      slashes:true 
    }))
  }
	
  mainWindow.webContents.on("did-finish-load",()=>{
      
  })
  mainWindow.webContents.on('dom-ready',()=>{
   
  })
  mainWindow.once('ready-to-show',function(){
    mainWindow.show();
  })


}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// app.whenReady().then(createWindow)
app.on('ready',()=>{

  createWindow();


});

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q

  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

6、和main.js同级添加preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

7、启动electron项目
(1)npm start 启动react项目
(2)npm run electron-dev 启动electron应用
修改代码react代码会热更新
(3)如果react打包后，运行 npm run electron 这个时候electron 加载的就是 build/index.html文件

8、打包react
npm run-script build
此时npm run electron运行的就是打包后的react项目

9、打包electron
(1)安装electron-packager
npm install electron-packager --save-dev
npm install electron-packager -g

(2)在package.json的"scripts"中添加
“pack”: “electron-packager . 此项目名称 --win --out ./打包后名称 --electron-version=8.2.4(版本号)”

(3)复制main.js和package.json文件到打包react后的build文件下

(4)npm run pack打包最后的应用程序