#best-practice #electron-vite #编译

[MarkShawn2020]

核心：

1. 把 nodejs 端代码隔离，不要向上渗透到 client 端，这样可以避免很多额外的配置，否则运行时会报错
2. esm/cjs 互相导入会报错的一些包，可以单独隔离，例如 next-auth 之类（具体还得待研究）（todo: next-auth 到底该放哪一部分）

糟糕的配置：

// electron.vite.config.external-only.ts

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin, loadEnv } from 'electron-vite'
// import commonjs from 'vite-plugin-commonjs'
// import react from '@vitejs/plugin-react'
// import wasm from 'vite-plugin-wasm'
// import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig(({ mode }) => {
  // ref: https://dev.to/boostup/uncaught-referenceerror-process-is-not-defined-12kg
  const env = loadEnv(mode, process.cwd(), '')

  return {
    main: {
      plugins: [externalizeDepsPlugin()],
    },
    preload: {
      plugins: [externalizeDepsPlugin()],
    },
    renderer: {
      define: {
        'process.env': env,
      },
      resolve: {
        alias: {
          '@renderer': resolve('src/renderer/src'),
        },
      },
      build: {
        rollupOptions: {
          // see: https://github.com/vitejs/vite/discussions/7374#discussioncomment-2787001
          external: new RegExp('/tiktoken|yargs-parser|file-box|wechaty-puppet-service/.*'),
        },
      },
      plugins: [
        // react(),
        // commonjs.default(),
        // nodePolyfills({}), // for fs, path, ..., see: https://github.com/vitejs/vite/discussions/15415
        // wasm() // for tiktoken.wasm
      ],
    },
  }
})

较好的配置：

// electron.vite.config.ts
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'
import react from '@vitejs/plugin-react'
import wasm from 'vite-plugin-wasm'

const envDir = resolve('../..')

export default defineConfig({
  main: {
    envDir,
    plugins: [externalizeDepsPlugin()],
  },

  preload: {
    envDir,
    plugins: [externalizeDepsPlugin()],
  },

  renderer: {
    envDir,
    resolve: {
      alias: {
        '.prisma/client/index-browser': '../../node_modules/.prisma/client/index-browser.js', // ref: https://github.com/prisma/prisma/issues/12504#issuecomment-1285883083
        '@renderer': resolve('src/renderer/src'),
      },
    },
    plugins: [
      react(),
      wasm(), // for tiktoken@llm
    ],
  },
})