基于 react + electron 开发及结合爬虫的应用实践

前言📝

👉 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。 👈

一个 electron-react 栗子 🤖

1️⃣-Demo 安装 react 脚手架

• 终端执行命令npx create-react-app react-electron自动进行配置安装
• 进入react-electron目录下执行yarn start，项目自动运行在 3000 端口

2️⃣-Demo 配置 electron 主进程

• 因为public文件夹不会被webpack打包处理，会直接复制一份到dist目录下，所以在public中新建electron.js作为主进程
• 在主进程中只需要从 electron 包中结构出 app, BrowserWindow,并监听 app 的’ready’事件，使用 BrowserWindow 生成实例对象，从而判断环境进行加载静态文件 or 端口

const {
    app, BrowserWindow } = require("electron");
const isDev = process.env.NODE_ENV !== "development";
app.on("ready", () => {
   
  mainWindow = new BrowserWindow();
  isDev
    ? mainWindow.loadURL(`file://${
     __dirname}\\index.html`)
    : mainWindow.loadURL(`http://localhost:3000`);
});

3️⃣-Demo 配置 react-cli

需要引入的库

yarn add electron electron-builder nodemon -D //安装到生产环境
yarn add concurrently cross-env -S //安装到开发环境

• 在 package.json 中通过 mian 标明主进程执行目录，配置 homepage

• 配置scripts和build字段,在 react 启动后打开 electron 桌面应用、通过cross-env 添加环境变量、以及在打包时如何进行配置（只进行 win 下打包）

  {
       
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "main": "public/electron.js",
  "homepage": ".",
    "scripts": {
       
    "start": "cross-env NODE_ENV=development concurrently \"yarn run client\" \"wait-on http://localhost:3000 && yarn run electron:watch\" ",
    "build": "yarn run build-client && yarn run build-electron",
    "client": "set BROWSER=none && react-scripts start",
    "electron:watch": "nodemon --watch public/electron.js --exec electron .",
    "electron": "electron .",
    "build-client": "react-scripts build",
    "build-electron": "electron-builder build -w",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
    "build": {
       
        "productName": "electron-demos",
        "files": ["build/","main.js"],
        "dmg": {
       
        "contents": [
            {
       "x": 110,"y": 150},
            {
       "x": 240,"y": 150,"type": "link", "path": "/Applications"}
        ]
        },
        "win": {
       
        "target": [<