插件:vite-plugin-electron

源文档地址:vite-plugin-electron

安装

npm i -D vite-plugin-electron

将vite-plugin-electron添加到vite.config.ts的插件部分

import electron from 'vite-plugin-electron/simple'

export default {
  plugins: [
    electron({
      main: {
        // `build.lib.entry的快捷方式`
        entry: 'electron/main.ts',
      },
      preload: {
        //`build.rollupOptions.input的快捷方式`
        input: 'electron/preload.ts',
      },
      // 可选：在渲染器进程中使用Node.js API
      renderer: {},
    }),
  ],

创建electron/main.ts文件并键入以下代码

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  const win = new BrowserWindow({
    title: 'Main window',
  })

  // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  } else {
    // Load your file
    win.loadFile('dist/index.html');
  }
})

将主条目添加到package.json

{
+ "main": "dist-electron/main.mjs"
}

Flat API

在大多数情况下，建议使用vite-lugin-election/简单API。如果你非常了解这个插件的工作原理，或者你想使用vite-plugin-electronic API作为低级API的二次封装，那么平面API更适合你。它也很简单，但更灵活。：）

与简单的API相比，不同之处在于它没有识别哪个条目表示预加载和对预加载的适应。

import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
  ],
}

Flat API vs Simple API

简单API基于平面API
简单的API包含一些预加载脚本预设配置。
Flat API提供了一些更通用的API，可以用于二次封装，例如nuxt-electron。

electron（options：ElectroOptions|ElectroOptions]）

export interface ElectronOptions {
  /**
   * Shortcut of `build.lib.entry`
   */
  entry?: import('vite').LibraryOptions['entry']
  vite?: import('vite').InlineConfig
  /**
   * Triggered when Vite is built every time -- `vite serve` command only.
   *
   * If this `onstart` is passed, Electron App will not start automatically.
   * However, you can start Electroo App via `startup` function.
   */
  onstart?: (args: {
    /**
     * Electron App startup function.
     * It will mount the Electron App child-process to `process.electronApp`.
     * @param argv default value `['.', '--no-sandbox']`
     * @param options options for `child_process.spawn`
     * @param customElectronPkg custom electron package name (default: 'electron')
     */
    startup: (argv?: string[], options?: import('node:child_process').SpawnOptions, customElectronPkg?: string) => Promise<void>
    /** Reload Electron-Renderer */
    reload: () => void
  }) => void | Promise<void>
}

推荐结构

让我们以基于create vite创建的官方模板vanilla ts为例

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ src
  │ ├── main.ts
  │ ├── style.css
  │ └── vite-env.d.ts
  ├── .gitignore
  ├── favicon.svg
  ├── index.html
  ├── package.json
  ├── tsconfig.json
+ └── vite.config.ts

内置格式

这只是默认行为，您可以通过vite.config.js中的自定义配置随时修改它们

{ "type": "module" }
┏————————————————————┳——————————┳———————————┓
│       built        │  format  │   suffix  │
┠————————————————————╂——————————╂———————————┨
│ main process       │   esm    │    .js    │
┠————————————————————╂——————————╂———————————┨
│ preload scripts    │   cjs    │   .mjs    │ diff
┠————————————————————╂——————————╂———————————┨
│ renderer process   │    -     │    .js    │
┗————————————————————┸——————————┸———————————┛

{ "type": "commonjs" } - default
┏————————————————————┳——————————┳———————————┓
│       built        │  format  │   suffix  │
┠————————————————————╂——————————╂———————————┨
│ main process       │   cjs    │    .js    │
┠————————————————————╂——————————╂———————————┨
│ preload scripts    │   cjs    │    .js    │ diff
┠————————————————————╂——————————╂———————————┨
│ renderer process   │    -     │    .js    │
┗————————————————————┸——————————┸———————————┛

JavaScript API

vite-plugin-electron的JavaScript API是完全类型化的，建议在VS Code中使用TypeScript或启用JS类型检查，以利用智能感知和验证。

electron-options
resolveViteConfig-函数，为构建Electron Main解析默认Vite的InlineConfig
带有ExternalBuiltins-功能
构建-功能
启动-功能

例子

import { build, startup } from 'vite-plugin-electron'

const isDev = process.env.NODE_ENV === 'development'
const isProd = process.env.NODE_ENV === 'production'

build({
  entry: 'electron/main.ts',
  vite: {
    mode: process.env.NODE_ENV,
    build: {
      minify: isProd,
      watch: isDev ? {} : null,
    },
    plugins: [{
      name: 'plugin-start-electron',
      closeBundle() {
        if (isDev) {
          // Startup Electron App
          startup()
        }
      },
    }],
  },
})

如何工作

它只是执行电子。命令，然后启动或重新启动Electron应用程序。

注意：默认情况下，electron文件夹中的文件将内置到dist-electron中。目前，Electron不支持“类型”：“模块”

原生C/C++

我们有两种方法来使用C/C++原生模块

第一种方式

一般来说，Vite可能无法正确构建Node.js包，尤其是C/C++原生模块，但Vite可以将其作为外部包加载，因此，将Node.js包放在依赖项中。除非你知道如何用Vite正确创建它们。

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
      vite: {
        build: {
          rollupOptions: {
            // Here are some C/C++ modules them can't be built properly
            external: [
              'serialport',
              'sqlite3',
            ],
          },
        },
      },
    }),
  ],
}

第二种方式

使用https://github.com/vite-plugin/vite-plugin-native

import native from 'vite-plugin-native'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
      vite: {
        plugins: [
          native(/* options */),
        ],
      },
    }),
  ],
}

Not Bundle

在开发阶段，我们可以从bundle中排除npm-pkg的cjs格式。就像Vite的Not Bundle。它很快！

import electron from 'vite-plugin-electron'
import { notBundle } from 'vite-plugin-electron/plugin'

export default defineConfig(({ command }) => ({
  plugins: [
    electron({
      entry: 'electron/main.ts',
      vite: {
        plugins: [
          command === 'serve' && notBundle(/* NotBundleOptions */),
        ],
      },
    }),
  ],
}))

api    (notBundle(/* NotBundleOptions */))

export interface NotBundleOptions {
  filter?: (id: string) => void | false
}

如何使用

让我们以electron-log 为例。

┏—————————————————————————————————————┓
│ import log from 'electron-log'      │
┗—————————————————————————————————————┛
                   ↓
Modules in `node_modules` are not bundled during development, it's fast!
                   ↓
┏—————————————————————————————————————┓
│ const log = require('electron-log') │
┗—————————————————————————————————————┛