基于create-react-app快速开发electron应用

原理

默认读者知道create-react-app及electron是什么以及基本的使用，所以不作过多介绍，本质上，咱们就是借助react项目开启http://localhost:3000端口，而后使用electron来加载这个端口的内容，从而完成开发环境的搭建！

安装

使用npm或yarn全局安装create-react-app脚手架

npm install -g create-react-app 
// or
yarn add -g create-react-app

建立react项目

create-react-app your-project-name

这里存在一种状况，那就是由于国内网络状况，一个总所周知的缘由（U•ェ•*U）可能会致使项目建立失败或建立的工程缺乏部分文件，解决办法很简单，切换国内的源

npm config set registry https://registry.npm.taobao.org
#验证源是否配置成功
npm config get registry

项目建立完毕

# 进入工程
cd your-project-name
# 建立main.js文件
touch main.js

安装electron依赖

yarn add electron --save

编辑main.js

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

app.on('ready',() => {
    let mainOption = {
        width: 1200,
        height: 600,
        webPreferences: {
            nodeIntergration: true
        }
    }
    let url = 'http://localhost:3000'
    let mainWindow = new BrowserWindow(mainOption)
    mainWindow.loadURL(url)
})

编辑package.json

...
//新增
"main": "main.js",
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "electron ."
},

启动项目

# react
yarn start
# electron
yarn dev

大功告成

若是你对Electron感兴趣，不妨看看这篇Electron开发实战