likes
comments
collection
share

Electron+React项目搭建

作者站长头像
站长
· 阅读数 53

Electron是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux。

Electron优劣

优点：

  • 跨平台兼容性：使用Electron可以轻松地在Windows、Mac和Linux等多个平台上构建桌面应用程序，同时保持一致的用户体验。
  • 前端技术栈：Electron基于Web技术栈构建，主要采用HTML、CSS和JavaScript等前端技术，这使得许多前端开发人员可以更快速地入门。
  • 社区支持：Electron有一个庞大的社区，拥有大量的开源资源和第三方库，例如React、Vue和Angular等流行的前端框架，以及许多插件和模块，方便开发者使用。
  • 高度可定制性：Electron提供了高度的定制性，使得开发人员可以轻松自定义应用程序的功能和界面。

缺点：

  • 底层交互差：Electron是基于Chromium和Node.js构建的，因此与原生应用程序相比，其底层交互性可能较差。
  • 性能差：与原生应用程序相比，Electron应用程序的性能可能较差。
  • 包大：Electron应用程序的体积可能较大，因为它们包含了Chromium和Node.js的运行环境。

创建React项目

npx create-react-app my-app
cd my-app
npm start

浏览器会自动打开网址 http://localhost:3000/

安装Electron

npm install electron -S
npm install electron-is-dev

electron-is-dev 是一个用于判断 Electron 是否处于开发环境的 Node.js 模块。可以在 Electron 的主进程或渲染进程中使用。在开发环境中，它的输出为 true；在非开发环境中，输出为 false。使用 electron-is-dev，可以更好地控制应用程序的行为，例如，在开发环境中启用某些调试工具，或者在非开发环境中启用一些优化设置。

添加入口文件

根目录(不是 src 目录)下面新建 main.js 文件,这个文件和 electron-quick-start 中的官方默认 main.js 几乎一模一样，只修改了加载应用这入口这一个地方：

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require("electron");
const isDev=require('electron-is-dev');

// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow;

const createWindow = () => {
    // 创建浏览窗口
    mainWindow = new BrowserWindow({
        title: "码上有料",
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            enableBlinkFeatures: true,
            contextIsolation: false,
        },
    });

    const url=isDev? "http://localhost:3000": "http://localhost:3000";
    mainWindow.loadURL(url);

    isDev&& mainWindow.webContents.openDevTools();
    mainWindow.once("ready-to-show", () => {
        mainWindow.show();
    });
    mainWindow.webContents.on("dom-ready", () => {});

    mainWindow.webContents.on("did-finish-load", () => {});

    mainWindow.on("closed", () => {
        mainWindow = null;
    });
};

// 当 app 启动之后，执行窗口创建等操作
app.on("ready", () => {
    createWindow();
});

// 所有窗口关闭时退出应用.
app.on("window-all-closed", function () {
    // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", function () {
    // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
    if (mainWindow === null) {
        createWindow();
    }
});

// 你可以在这个脚本中续写或者使用require引入独立的js文件.

添加启动方式

//package.json
{
  "main": "main.js",
  "homepage": ".",
  "author": "ldf6780@163.com",
  "description": "码上有料",
  "scripts": {
    "start:electron":"electron .",
  },
}

启动应用：

// 由于我们在main.js文件里使用了url访问到react项目，所以在这里需要先启动react项目
npm start
npm run start:electron

Electron+React项目搭建 支持热调试，修改代码后，桌面应用也将会重新更新。

应用启动优化

上文所述，启动electron应用需要先启动React应用，再启动electron。

执行多条脚本命令

安装concurrently

npm install concurrently

配置文件：

//package.json
{
  "scripts": {
    "start": "react-scripts start",
    "start:electron": "electron .",
 +  "dev":"concurrently \"npm start\" \"npm run start:electron\""
  },
}

启动应用：

npm run dev

优点：

  • 只需执行一次命令即可启动两个应用 不足：
  • 浏览器是启动起来了，Electron里面却是白板
  • 只有Cmd+R快捷刷新，才能把Electron里的内容刷出来

只启动electron

当react应用启动成功，在启动electron。

安装wait-on工具：

npm install wait-on -D

可以延迟运行脚本直到端口准备就绪。

配置文件：

//package.json
{
  "scripts": {
    "start": "react-scripts start",
    "start:electron": "electron .",
 +  "dev": "concurrently \"npm start\" \"wait-on http://localhost:3000/ && npm run start:electron\""
  },
}

使用wait-on在 http://localhost:3000 启动好，才会打开Electron窗口。避免了先启动Electron，等待服务时候的白屏现象。

再次启动

Electron+React项目搭建

如图，React默认情况下会打开一个浏览器窗口，但对于 Electron 开发来说，这是不必要的。咱们可以通过传递环境变量BROWSER=none来禁用此行为。

使用的脚手架create-react-app，这个脚手架提供了一个环境变量，BROWSER，说到环境变量，我们需要安装一个库 cross-env，跨平台设置环境变量。

安装cross-env工具：

npm install cross-env -D

配置文件：

//package.json
{
  "scripts": {
    "start": "react-scripts start",
    "start:electron": "electron .",
 +  "dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000/ && npm run start:electron\""
  },
}

再次启动，只启动了React服务和electron应用。

到此，就可以愉快的开发我们的项目了。

项目打包

React打包

首先修改main.js, 因为现在你要将 react 项目打包在 build 文件夹下面，所以加载应用处改成如下！当然也可在某个配置文件里面配置是否属于开发，此处用if判断一下从未进行选择执行哪段加载应用代码。但是这里为了简便，暂且使用直接修改的方式：

    if (!isDev) {
        // 加载应用----react 打包
        mainWindow.loadURL(
            url.format({
                pathname: path.join(__dirname, "./build/index.html"),
                protocol: "file:",
                slashes: true,
            })
        );
    } else {
        // 加载应用----适用于 react 开发时项目
        mainWindow.loadURL("http://localhost:3000/");
    }

默认情况下，homepage 是 http://localhost:3000，build 后，所有资源文件路径都是 /static，而 Electron 调用的入口是 file :协议，/static 就会定位到根目录去，所以找不到静态文件。在 package.json 文件中添加 homepage 字段并设置为"."后，就可以开始打包了。

"homepage":"."

npm run build

electron打包

可用打包工具：

  • electron-builder
  • electron-packager

安装electron-packager：

npm install electron-packager --save-dev

electron-packager命令：

npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

参数说明：

  • sourcedir：项目所在路径
  • appname：应用名称
  • platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
  • architecture：决定了使用 x86 还是 x64 还是两个架构都用
  • electron version：electron 的版本
  • optional options：可选选项

特点：

  • 支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
  • 进行应用更新时，使用electron内置的autoUpdate进行更新
  • 支持CLI和JS API两种使用方式；

在 package.json 文件的在 scripts 中加上如下代码：

"package": "npx electron-packager ./ code --out ./outApp --arch=arm64 --electron-version=26.2.0 "

打包完成后会在～/目录下生成对应平台的包。 打包的时候会把浏览器内核完整打包进去，所以就算你的项目开发就几百k的资源，但最终的打包文件估计也会比较大。

最后

electron确实是一个跨平台开发应用的利器，通过web开发就能实现wirte once, run every where的理念。

在electron里面可以调用nodejs几乎所有的功能，当然前提是需要require nodejs的包； 在react的js页面或者公司项目用到的Ant Design的一些js页面需要用到electron时候，通过官方的

const electron = require('electron')

语句并不能成功引入，此时需要通过

const electron = window.require('electron')

引入。

转载自:https://juejin.cn/post/7276814487054417957
评论
请登录