使用 electron-vite 和 react-devtools 进行配置

2 年 ago

宇, 华

3 minutes

首先

在本文中，我们介绍了如何将react-devtools引入electron-vite + React构建的开发环境。在本文设置中，我们只在开发时的development构建中启动react-devtools。

electron-vite是什么？

他们提供了一个基于Vite的Electron应用程序开发环境。

react-devtools是什么？

这是React Developer Tools的npm包。在进行React开发时，这是一个必不可少的调试工具，可以说是毫不夸张的。

安装软件包

安装所需的软件包。

npm install electron-vite vite react-devtools npm-run-all -D
npm install react

以下是撰写时每个软件包的版本。
shì huí shí gè de .)

react: 18.2.0

请参考electron-vite的文档创建项目。本文假设项目已经创建完毕。

目录结构

下面是目录的结构。此处仅提取了与本篇相关的部分。

/
└ package.json
└ electron.vite.config.ts
└ src/
    └ renderer/
        └ App.tsx
        └ index.tsx
        └ index.html
        └ dev/
            └ index.tsx
            └ index.html

App.tsx程序

这是一个React的示例。

import React from 'react';

const App: React.FC = () => {
  return <div>Hello World!</div>;
};

export default App;

用于生产的index.tsx/html

这是位于src/renderer目录下的index.tsx和index.html文件。这是用于生产构建的文件。

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const root = createRoot(document.getElementById('contents')!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Electron</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="contents"></div>
    <script type="module" src="/index.tsx"></script>
</body>
</html>

用于开发的 index.tsx/html

以下是`src/renderer/dev`目录下的`index.tsx`和`index.html`文件。这些文件是用于开发构建的。

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from '../App';  // ここのパスが違うだけ

const root = createRoot(document.getElementById('contents')!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

<!DOCTYPE html>
<html>
<head>
    <!-- React DevTools -->
    <script src="http://localhost:8097"></script>

    <meta charset="utf-8" />
    <title>Electron Dev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="contents"></div>
    <script type="module" src="/index.tsx"></script>
</body>
</html>

在开发用的index.html中嵌入了用于react-devtools的script标签。这个script标签在执行后面提到的npm run devtool命令时，会显示在下面的窗口中。

electron-vite的配置

Electron-Vite的设置应写在electron.vite.config.ts文件中。以下是有关React DevTools设置的摘录。

import path from 'path';

import { defineConfig, defineViteConfig } from 'electron-vite';

export default defineConfig({
  renderer: defineViteConfig(({ command, mode }) => {
    if (mode === 'development') {
      return {
        root: 'src/renderer/dev',
        build: {
          rollupOptions: {
            input: path.join(__dirname, 'src/renderer/dev/index.html'),
          },
        },
      };
    } else {
      // production
      return {
        root: 'src/renderer',
        build: {
          rollupOptions: {
            input: path.join(__dirname, 'src/renderer/index.html'),
          },
        },
      };
    }
  }),
});

重点是通过 mode 对每个构建进行配置区分，并分别设置 root 和 build.rollupOptions.input 的路径。

在package.json中添加scripts。

在package.json文件中添加以下npm脚本。

{
  "scripts": {
    "devtool": "react-devtools",
  　　　　"start": "electron-vite preview", // start electron app to preview production build
    "ev:dev": "electron-vite dev",
    "dev": "run-p devtool ev:dev", // start dev server and electron app
    "prebuild": "electron-vite build" // build for production
  }
}

通过安装npm-run-all软件包，可以使用run-p命令并行运行指定的npm脚本（在这里是devtool和ev:dev）。

启动开发环境

如果想要启动开发构建环境，请执行以下命令。

npm run dev

通过使用react-devtools，你可以在启动Electron应用程序的同时进行开发。