环境搭建：使用Electron、React和Bootstrap开发跨平台的桌面应用

本文将简单介绍如何搭建Electron、React和Bootstrap环境，步骤如下：

环境准备

要使用Electron构建项目首先我们需要安装Node环境，我的Node版本如下：

Node: v12.13.0
Npm: 6.12.0

创建React项目

使用React官方推荐命令创建一个项目

$ npx create-react-app electron-react-bootstrap

检验项目是否创建成功

$ cd electron-react-bootstrap
$ npm start
或者
$ yarn start
Compiled successfully!

You can now view electron-react-bootstrap in the browser.

  Local:  http://localhost:3000/
  On Your Network:  http://192.168.31.100:3000/

启动后使用浏览器访问：http://localhost:3000,我们将看到如图界面：

这样我们的React项目就创建成功。接下来我们将添加Electron，Bootstrap等库到本项目中。

安装Electron以及相关库

$ npm install --save electron
或者
$ yarn add electron

安装devtron库，Electron DevTools扩展，可帮助我们检查，监视和调试应用程序，工具源码地址：https://github.com/electron-userland/devtron。 效果如图：

$ npm install --save-dev devtron
或者
$ yarn add devtron

安装electron-is-dev库，用于Electron是否开发环境判断

$ npm install --save electron-is-dev
或者
$ yarn add electron-is-dev

然后在项目根目录创建main.js作为项目启动的入口文件，并添加如下代码：

const {app, BrowserWindow} =require('electron')
const isDev=require('electron-is-dev')

let mainWindow;

app.on('ready',()=>{
    //调试使用
    require('devtron').install()

    mainWindow=new BrowserWindow({
        width:1024,
        height:680,
        webPreferences:{
          nodeIntegration:true,
        }
    })

    //这里判断是否开发环境，如果是则从localhost加载页面到Electron
    const urlLocation=isDev?'http://localhost:3000':'unknow'

    mainWindow.loadURL(urlLocation)
    mainWindow.webContents.openDevTools()
})

然后我们将入口文件main.js路径添加到package.json文件中，并添加启动命令，示例如下：

{
  "name": "electron-react-bootstrap",
  "version": "0.1.0",
  "main":"main.js",  //这里配置入口文件
  "private": true,
  "dependencies": {
    "electron": "^7.1.3",
    "electron-is-dev": "^1.1.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev":"electron ."  //启动electron命令
  },
  "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"
    ]
  }
}

配置完后我们执行以下命令启动Electron

$ npm run dev

注意：执行上面命令之前得确保React项目已经启动，且http://localhost:3000能正常访问

如果一切顺利我们将看到如下的效果：

安装Bootstrap

$ npm install --save bootstrap

并修改app.js文件，内容如下：

import React from 'react';
import logo from './logo.svg';
import 'bootstrap/dist/css/bootstrap.min.css'  //bootstrap样式引用
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <!--如下代码使用bootstrap样式-->
        <h1 className="page-header">bootschool.net</h1>
        <div className="row">
          <a className="btn btn-primary">按钮1</a>
          <a className="btn btn-success">按钮2</a>
          <a className="btn btn-warning">按钮3</a>
          <a className="btn btn-danger">按钮4</a>
        </div>
      </header>
    </div>
  );
}

export default App;

然后重新加载electron,我们就可以看到新的效果了，如图：

这样我们就完成了Electron、React、Bootstrap的简单整合。

项目优化

说明：上面搭建的环境并不是很完美，因为要执行两次启动操作：先启动React项目，再启动Electron，而且React启动的时候自动打开了浏览器，过程过于繁琐。能不能做到一步到位呢？当然可以。

要实现执行一步到位，我们需要安装几个其他的工具库：

$ npm install --save-dev concurrently
$ npm install --save-dev wait-on
$ npm install --save cross-env

concurrently工具可以一次性执行多条npm命令，使用方法为：concurrently "command1 arg" "command2 arg"
wait-on工具将等待文件，端口，Socket和HTTP(S)资源变得可用时才执行其他命令，使用方法如下：

wait-on file1 && NEXT_CMD # wait for file1, then exec NEXT_CMD 
wait-on f1 f2 && NEXT_CMD # wait for both f1 and f2, the exec NEXT_CMD 
wait-on http://localhost:8000/foo && NEXT_CMD # wait for http 2XX HEAD 
wait-on https://myserver/foo && NEXT_CMD # wait for https 2XX HEAD 
wait-on http-get://localhost:8000/foo && NEXT_CMD # wait for http 2XX GET 
wait-on https-get://myserver/foo && NEXT_CMD # wait for https 2XX GET 
wait-on tcp:4000 && NEXT_CMD # wait for service to listen on a TCP port 
wait-on socket:/path/mysock # wait for service to listen on domain socket 
wait-on http://unix:/var/SOCKPATH:/a/foo # wait for http HEAD on domain socket 
wait-on http-get://unix:/var/SOCKPATH:/a/foo # wait for http GET on domain socket

cross-env工具用于解决跨平台环境变量不兼容问题。有了它，只需要一条命令就可以在多个平台上执行。使用方法为：

{
  "scripts": {
    "start": "cross-env NODE_ENV=development npm start"
  }
}

本文使用cross-env这个工具是为了禁止React启动时自动打开浏览器：cross-env BROWSER=none npm start

添加完以上工具库后，我们将修改package.json中的dev命令，示例如下:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \" wait-on http://localhost:3000 && electron .\"  \"cross-env BROWSER=none npm start\" "
},

修改完后，我们只需要执行npm run dev命令就可以一步到位了。