Preload Scripts Code Not Split

Whether Node.js is enabled in the Main process or not, the Preload scripts supports loading electron module, so we need to build it in cjs format.

import { ipcRenderer } from 'electron'
// ↓↓↓↓ Build with `cjs` format ↓↓↓↓
const { ipcRenderer } = require('electron')

When Rollup builds code in cjs format, it will automatically split the code into multiple chunks, and use require() to load them, and use require() to load other modules when nodeIntegration: false in the Main process Errors will occur. So we need to configure Rollup not to split the code when building to ensure that it works correctly with nodeIntegration: false.

Note

In the nodeIntegration: true case we don't have to worry about this!

中文

无论主进程开启 Node.js 与否，预加载脚本都支持加载 electron 模块，所以我们需要 cjs 格式构建它。

当 Rollup 以 cjs 格式构建代码时会自动将代码拆分成多个 chunk，并且使用 require() 加载它们，并且在主进程 nodeIntegration: false 时使用 require() 加载其他模块会发生错误。所以我们需要配置 Rollup 构建时候不要拆分代码，以确保在 nodeIntegration: false 情况下正常工作。

在 nodeIntegration: true 情况下，我们不必为此担心！

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

export default {
  plugins: [
    electron([
      {
        entry: 'electron/main/index.ts',
      },
      {
        entry: 'electron/preload/index.ts',
        onstart({ reload }) {
          reload()
        },
        vite: {
          build: {
            outDir: 'dist-electron/preload',
            rollupOptions: {
              output: {
                // Disable Preload scripts code split
                inlineDynamicImports: true,
              },
            },
          },
        },
      }
    ]),
  ],
}

Preload Scripts Code Not Split ​

Preload Scripts Code Not Split