基於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開發實戰