依赖预构建

一般情况下，Vite 的预构建会将所有第三方 npm 包构建成 Web 格式，但它无法完全使用于 Electron 渲染进程，尤其是 C/C++ 扩展。为此 vite-plugin-electron-renderer 提供了适配 Electron 渲染进程的预构建。

注意

预构建是 vite-plugin-electron-renderer 的功能，只在构建渲染进程时工作。

中文

一般情况下。 Vite 的预构建会将所有第三方模块构建成 Web 格式，但它无法完全使用于 Electrn 渲染进程，尤其是 C/C++ 扩展。为此 vite-plugin-electron-renderer 提供了适配 Electron 渲染进程的预构建。

预构建是 vite-plugin-electron-renderer 功能，即只在构建渲染进程时工作。

CommonJS

import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
    renderer({
      resolve: {
        // C/C++ addons
        sqlite3: { type: 'cjs' },
        // JavaScript cjs lib
        'electron-store': { type: 'cjs' },
      },
    }),
  ],
}

ESModule

import electron from 'vite-plugin-electron'
import renderer from 'vite-plugin-electron-renderer'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
    renderer({
      resolve: {
        // JavaScript esm lib
        got: { type: 'esm' },
        'node-fetch': { type: 'esm' },
      },
    }),
  ],
}

高级

目前为止，vite-plugin-electron-renderer 的预构建仍被视为一个“实验性”的功能。

下面是一个展示如何完全自定义预构建的示例。

中文

目前为止，vite-plugin-electron-renderer 的预构建仍然被视为是一个“实验性”的功能。

下面是展示如何完全自定义预构建的案例。

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

// https://vite.ac.cn/config/
export default defineConfig({
  plugins: [
    // Use Node.js API in the Renderer process
    renderer({
      resolve: {
        'node-fetch': {
          type: 'esm',
          async build(args) {
            // 1. Simple code snippet
            return `export * from 'node-fetch'`

            // 2. Build using built-in shortcuts
            return args.cjs(`export default require('node-fetch');`)
            return args.esm('node-fetch', { /* esbuild options */ })
          },
        },
      },
    }),
  ],
})

依赖预构建 ​

CommonJS ​

ESModule ​

高级 ​

依赖预构建

CommonJS

ESModule

高级