react + electron 简易项目搭建 （小白新手入门）

 

一、搭建react项目：

   1、react官网 自己搭建

               >npx create-react-app my-app

               >cd my-app

               > npm install && npm start(cnpm || yarn 都行 以下我的示例以npm为例)

   2、react 项目 start 之后 确保项目能运行(react 项目搭建完成)

二、建好react项目后 接入electron

   1、引入electron

    npm install electron --save-dev

2、在package.json 中配置

 "name": "my-app",

  "version": "0.1.0",

  "main": "main.js",  //  添加 electron 进程入口文件

  "scripts": {

    "start": "react-scripts start",

    "dev": "electron .",   // 配置 electron 启动

    "build": "react-scripts build",

  },

3、在根目录下 新建 main.js 文件

下面是我刚随便 写的一个可以复制下看看 搭建的效果：

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

const { resolve } = require('path')

const { NODE_ENV } = process.env

const isDev = NODE_ENV === 'development'

let win = {}

async function createWindow() {

    win = new BrowserWindow({ width: 1000, height: 500 })

    win.setMenu(null)

    opts = `http://localhost:3000`

    win.webContents.openDevTools()

    win.on('ready-to-show', function () { win.show() })

    win.loadURL(opts)

}

app.on('ready', _ => { createWindow() })

app.on('activate', () => {

    if (global.win === null) { createWindow() }

})

 4、因为当前 是 简单的环境搭建 

运行：1、npm start  2、npm run dev 需要开启两个cmd终端 

5、项目 能简单的启动 

 

 三、解决需要执行npm start 和 npm run dev 两个命令 带来的烦恼

1、npm install concurrently --save-dev

2、npm install wait-on --save-dev

3、npm install cross-env --save-dev

4、在 package.json 中 将刚刚scripts:{ "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\"" }



（意思为开启npm start 时候 等待 localhost:3000可以了 开始执行 electron . ,并且不用自动打开浏览器）

四、解决修改代码块 热加载 配置（持续更新...）

五、加入webpack配置（持续更新...）

六、webpack配置下优化文件结构-主进程和渲染进程（持续更新...）

七、electron-builder 打包（持续更新...）

 

今天太晚了  先暂时下到这了。。。后续看 有没有人看  在更新吧 。怕浪费时间。。。(●'◡'●)