用 Electron Forge 建立 React 的基礎

2 年 ago
清, 宇
3 minutes
信息
此文章截止至2023年2月25日。由于版本更改，方法可能会有所变化。

首先

Electron是一款电脑软件开发框架。

Electron是一个使用Web技术（JavaScript、CSS、HTML）开发跨平台应用程序的框架。只要了解JavaScript，即使没有C++或C#等编写原生应用程序的知识，也能轻松创建桌面应用程序。

 

Electron Forge是什么？

Electron Forge是一个全能工具，用于打包和分发Electron应用程序，它可以一起处理代码签名和构建过程。

 

创建 Electron Forge 的模板

我将创建 Electron Forge 的模板。
为了与 Webpack 和 TypeScript 兼容，将使用以下命令。

$ npm init electron-app@latest <アプリ名> -- --tempate=webpack-typescript

完成后，将在当前目录下创建应用程序名称的目录。使用该目录打开正在使用的编辑器。

一旦检查是否移动

在启动Electron Forge应用的“package.json”脚本中，将确认应用是否启动。

$ npm start

如果满足以下条件，那就可以了。对于Windows和Linux，关闭窗口即可，而对于macOS，可以从菜单中选择”Quit”或者「終了」来结束应用程序。

image.png

引入React

为了将React整合到Electron Forge应用程序中，执行以下步骤。

引入 npm 包

我們將引入npm套件中的react和react-dom。

$ npm install react react-dom

为了使 TypeScript 兼容，我们需要引入 @types/react 和 @types/react-dom。

$ npm install --save-dev @types/react @types/react-dom

修改tsconfig.json文件

为了使TypeScript支持JSX（TSX），打开tsconfig.json文件并添加”jsx”: “react-jsx”。

{
  "compilerOptions": {
    "target": "ES6",
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "*": ["node_modules/*"]
-   }
+   },
+   "jsx": "react-jsx" 
  },
  "include": ["src/**/*"]
}

更改index.html文件

我們添加React渲染的元素。
我們可以刪除最初定義的h1標籤和p標籤，因為它們是不必要的。
title標籤可以根據需要進行更改。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>

  </head>
  <body>
-   <h1>? Hello World!</h1>
-   <p>Welcome to your Electron application.</p>
+   <div id="app"></div>
  </body>
</html>

创建App.tsx文件

创建一个名为App.tsx的文件，它将成为React组件的主要部分。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>Hello world from React</h1>
      <p>with Electron Forge!</p>
      <p>You clicked {count} time(s)</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </>
  )
}

export default App;

创建root.tsx文件

我们要创建React的根部文件root.tsx。

import { createRoot } from "react-dom/client";

import App from "./app";

function render() {
  const root = createRoot(document.getElementById("app"));
  root.render(<App />);
}

render();

renderer.ts文件的更改

将先前创建的root.tsx导入到renderer.ts中。
同时，删除用于输出日志的脚本。

// -- snip --

import './index.css';
+ import './root';

- console.log('? This message is being logged by "renderer.js", included via webpack');

动作检查

我們將按照最初檢查時的相同步驟進行操作檢查。

$ npm start

如果符合下述要求，操作就是正常的。

image.png

单击「点击这里」，您可以确认数字将递增。

image.png

安装React DevTools

2023/02/25目前，React DevTools无法运行。
据说这是由于React DevTools的清单文件问题引起的。
请查看以下GitHub问题链接以获取更多详细信息（英文）。
https://github.com/electron/electron/issues/36545
https://github.com/facebook/react/issues/25843

为了顺利进行React开发，我们将引入React DevTools这个扩展工具。

安装npm包

安装npm包electron-devtools-installer。

$ npm install --save-dev electron-devtools-installer

更改index.ts

在index.ts文件中添加一个脚本，用于安装React DevTools。

import { app, BrowserWindow } from 'electron';
+ import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

// -- snip --
const createWindow = (): void => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    webPreferences: {
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
    },
  });

+ // Install React DevTools extension
+ installExtension(REACT_DEVELOPER_TOOLS)
+   .then((name) => console.log(`Extension installed: ${name}`))
+   .catch((err) => console.error(err));

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};

// -- snip --

请检查

如果在开发工具的标签页中有 ⚛ 组件和⚛ 性能分析器，那么就可以进行安装。

image.png

這次的內容我已經上傳到GitHub倉庫作為模板了。請隨意使用。

 

bannerAds