electron-vite-samples

Understanding the difference between Rollup and Webpack is crucial when deciding which bundler to use for your project, especially regarding module interop and output structure.

Webpack

Webpack organizes code following the CommonJS (CJS) specification. It uses a module-centric approach involving:

• Modules: A central registry of all modules.
• module.exports: The mechanism for exporting members.
• require: The function used for loading modules.

Webpack wraps modules in a function shell to manage these dependencies.

Rollup

Rollup produces output based on the standard ESModule (ESM) specification. It does not use an implicit CommonJS wrapper, resulting in "what you see is what you get" code that closely matches your source. This makes Rollup highly efficient for tree-shaking but can lead to side effects when handling dynamic import() calls if not managed carefully.

// Webpack Bundle Example
var __webpack_modules__ = {
  0: (module, exports, __webpack_require__) => {
    const { add } = __webpack_require__(1)
    const sum = add(1 + 2)
  },
  1: (module, exports, __webpack_require__) => {
    function add(a, b) {
      return a + b
    }
    module.exports = { add };
  }
}
module.exports = __webpack_require__(0)

// Rollup Bundle Example
function add(a, b) {
  return a + b
}
const sum = add(1 + 2)

C/C++ modules (compiled as .node binary files) cannot be bundled into a single JavaScript file like standard JS because they require CommonJS bindings to be loaded by Node.js.

Webpack Strategy

Webpack handles .node files by copying them to the dist folder and injecting a require('./xxx.node') statement. For modules built with tools like node-gyp or node-pre-gyp (which typically use paths like build/Release/xxx.node), you should use loaders like @vercel/webpack-asset-relocator-loader to ensure the files are correctly relocated and the runtime paths are injected into the bundle.

Rollup Strategy

Rollup does not natively support C/C++ modules. You can use rollup-plugin-natives to approximate Webpack's behavior by bypassing standard CommonJS plugin processing for require() calls to avoid parsing errors.

General Rules for .node files:

1. Direct Require: If a package uses require('./xx.node') directly, simply copy the .node file to your output directory.
2. Tool-built (node-gyp/node-pre-gyp): Locate the file following the standard build patterns (e.g., build/Release/) and copy it to the output directory.

Handling Unpredictable Modules (e.g., serialport)

If a module does not follow standard patterns or allows dynamic configuration of its .node path (like better-sqlite3), it may fail to bundle correctly. The recommended solution for Electron developers is to mark the problematic package as external in your Webpack configuration and include it in your package.json dependencies. Tools like electron-builder will then copy the entire dependency tree into the final node_modules folder, allowing Node.js to resolve the binaries at runtime.

// Webpack external configuration for problematic native modules
module.exports = {
  externals: {
    serialport: 'commonjs Serialport'
  }
};

The switchURL function handles the lifecycle of windows in this sample. It determines whether to instantiate a new BrowserWindow or focus an existing one based on the title property.

Loading Logic:

• Development: If process.env.VITE_DEV_SERVER_URL is present, the window loads the URL from the Vite dev server: [VITE_DEV_SERVER_URL]/html/[html_filename].
• Production: The window loads the file from the local filesystem: ../dist/html/[html_filename].

Window Configuration:

• Each window is assigned a title equal to the requested HTML filename.
• A preload.js script is automatically attached to every window created via this function.

// Internal logic used by the 'to-window' IPC handler
function switchURL(html = 'index.html') {
  const existWin = windows.find(w => w.title === html)

  if (existWin) {
    existWin.focus()
  } else {
    const win = new BrowserWindow({
      title: html,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
      },
    })

    if (process.env.VITE_DEV_SERVER_URL) {
      win.loadURL(path.posix.join(process.env.VITE_DEV_SERVER_URL, 'html', html))
    } else {
      win.loadFile(path.join(__dirname, `../dist/html/${html}`))
    }
    windows.push(win)
  }
}