electron+react刨坑笔记（1）

本人对于react还算是比较精通的。

但是由于最近看到某条招聘react+electron的前端开发，因而对electron产生了深厚的兴趣。

今天开始学习：

首先搭建环境，我用的是react-create-app脚手架来搭建react环境

安装react-create-app脚手架

npm install -g create-react-app  

创建项目

$ create-react-app myapp  
$ cd myapp

安装electron

$ npm electron

安装electron打包工具

$ npm install -g electron-prebuilt electron-packager

这几个安装都容易连接失败报错，如果报错中断了，就重复命令再安装一次。

修改package.json文件如下：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "homepage": ".",
  "dependencies": {
    "electron": "^1.8.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-scripts": "^1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "set NODE_ENV=dev&&electron .",
    "packager": "electron-packager . HelloWorld --platform=win32 --arch=x64 --out=./OutApp --version=1.8.3 --overwrite --icon=./build/favicon.ico --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\""
  },
  "devDependencies": {
    "electron-packager": "^11.1.0"
  }
}

myapp根目录下打开新建文件main.js

// main.js

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.

  mainWindow = new BrowserWindow({width: 1200, height: 800})
  mainWindow.loadURL('http://localhost:3000/')
  // and load the index.html of the app.
  // mainWindow.loadURL(url.format({
  //   pathname: path.join(__dirname, './builds/index.html'),
  //   protocol: 'file:',
  //   slashes: true
  // }))

  // Open the DevTools.
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// 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.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X 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 OS X 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 (mainWindow === null) {
    createWindow()
  }
})

安装和创建文件完毕，然后就可以开始跑了

首先把react环境跑起来

$ npm start

再把electron环境跑起来

$ npm electron-start

一切顺利，OK

创建文件：package.json: