Electron⚡️Vite

外观

本页内容

核心插件 ​

vite-plugin-electron ​

vite-plugin-electron 使开发 Electron 应用像开发普通的 Web 应用一样简单。它可以轻松地与 Vite 官方模板结合！

它还提供完整的 JavaScript API，方便在任何地方使用。

中文

vite-plugin-electron 使得你开发 Electron 应用像开发正常的 Web 应用那样简单，它可以非常简单得与 Vite 官方的模板结合！

除此之外它还提供全量的 JavaScript API 可以很方便的在任何地方使用它。

基本用法 ​

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      // Main process entry file of the Electron App.
      entry: 'electron/main.ts',
    }),
  ],
}

使用预加载脚本 ​

vite-plugin-electron 支持传递数组。

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron([
      {
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/preload.ts',
        onstart({ reload }) {
          // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
          // instead of restarting the entire Electron App.
          reload()
        },
      },
    ]),
  ],
}

代码分割 ​

vite-plugin-electron 允许进行非常灵活的代码分割，它可以使用传递数组的形式构建，或者使用 Vite 内置的多入口 构建。

中文

vite-plugin-electron 可以进行十分灵活的代码拆分，它可以使用传递数组的形式构建，或者使用 Vite 内置的多入口 构建。

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

// Use array
export default {
  plugins: [
    electron([
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
      {
        entry: 'electron/main-chunk.ts',
      },
    ]),
  ],
}

// Use Vite multi-entry
export default {
  plugins: [
    electron({
      entry: {
        // Main-Process entry file of the Electron App.
        main: 'electron/main.ts'
        'main-chunk': 'electron/main-chunk.ts',
      },
    }),
  ],
}

自定义启动 ​

如果你想在启动或重启 Electron App 之前或之后做些什么，它会很有用。

中文

如果你想在启动或重启 Electron App 之前或之后做些什么，它会很有用。

ts
// vite.config.ts
import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      entry: 'electron/main/index.ts',
      onstart({ startup }) {
        // Do something...
        startup()
      },
    }),
  ],
}

自定义构建 ​

vite-plugin-electron 支持全量的 Vite 的内联配置。

中文

vite-plugin-electron 支持全量的 Vite 配置。

ts
// vite.config.ts
import electron from 'vite-plugin-electron/simple'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
      // 👉 https://vite.ac.cn/guide/api-javascript.html#inlineconfig
      vite: {/* Vite config ⚡️ */},
    }),
  ],
}

JavaScript API ​

vite-plugin-electron/simple ​

很多时候，对于一个刚接触 Vite 和 Electron 的开发者来说，过于简化和开放的 API 设计会让他们感到困惑。也许简单的 API 会让他们更容易理解。😃

ts
// vite.config.ts
import electron from 'vite-plugin-electron/simple'

export default {
  plugins: [
    // Just like v0.9.x
    electron({
      main: {
        entry: 'electron/main.ts',
      },
      // Optional: input must be use absolute path
      preload: {
        input: 'electron/preload.ts',
      },
      // Optional: Use Node.js API in the Renderer process
      renderer: {},
    }),
  ],
}

vite-plugin-electron-renderer ​

vite-plugin-electron-renderer 做了三件事

  1. 修改一些 Vite 默认配置以适应构建**渲染进程**。
  2. 填充 Electron 和 Node.js 内置模块。
  3. 通过自定义预构建支持第三方 npm 包加载，尤其是 C/C++ 扩展。

注意

请确保你在**主进程**中启用了 nodeIntegration: true。

中文

vite-plugin-electron-renderer 做了三件事：

  1. 修改一些 Vite 默认的配置以适配构建渲染进程。
  2. 填充 Electron 和 Node.js 模块。
  3. 通过自定义预构建支持第三方 npm 包加载，尤其是 C/C++ 扩展。

注意：请确保你在主进程中启用了 nodeIntegration: true

基本用法 ​

ts
// vite.config.ts
import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
    // Use Electron and Node.js built-in modules in Renderer process
    renderer(),
  ],
}

Electron 和 Node.js API ​

ts
// In a Renderer process file
import { readFileSync } from 'node:fs'
import { ipcRenderer } from 'electron'

// Node.js
const content = readFileSync('foo.txt', 'utf8')

// Electron
ipcRenderer.send('foo', 'arg1')

工作原理 ​

日志
┏————————————————————————————————————————┓         ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │         │ Vite dev server │
┗————————————————————————————————————————┛         ┗—————————————————┛
         │                                                   │
         │ 1. Pre-Bundling electron module into              │
         │    node_modules/.vite-electron-renderer/electron  │
         │                                                   │
         │ 2. HTTP(Request): electron module                 │
         │ ————————————————————————————————————————————————> │
         │                                                   │
         │ 3. Alias redirects to                             │
         │    node_modules/.vite-electron-renderer/electron  │
         │    ↓                                              │
         │    const { ipcRenderer } = require('electron')    │
         │    export { ipcRenderer }                         │
         │                                                   │
         │ 4. HTTP(Response): electron module                │
         │ <———————————————————————————————————————————————— │
         │                                                   │
┏————————————————————————————————————————┓         ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │         │ Vite dev server │
┗————————————————————————————————————————┛         ┗—————————————————┛

加载第三方 npm 包 ​

在大多数情况下，用纯 JavaScript 编写的 Node.js npm 包可以直接在渲染进程中使用。如果它是 C/C++ 扩展或 ESModule 格式包，则需要在使用前进行预打包。

有关详细信息，请参阅👉 依赖预打包部分。

中文

多数情况下一个纯 JavaScript 编写的 Node.js npm 包是可以直接在渲染进程中使用的。如果它是 C/C++ 扩展，或者 ESModule 格式包，那么需要将它预构建后才可以工作。

详情请看 👉 Dependency Pre-Bundling 部分。