Electron项目中，应该使用commonjs还是module？

设置 type 为 "commonjs" 和 "module" 的主要区别是决定了你在项目中使用 模块化语法 的方式。它们是两种不同的模块化规范，各有特点和适用场景。在 Electron 项目中，这种选择会影响你的代码组织和兼容性。

PS：下面都是一堆屁话，试用electron强烈推荐使用 commonjs 语法，因为使用 ESM(module) 语法可能会遇到各种各样奇怪的问题，一旦出现问题比较麻烦！！！

基本区别

CommonJS (`type: "commonjs"`)

规范来源：Node.js 原生支持。
语法：
- 导入模块：const module = require("module");
- 导出模块：module.exports = someValue;
特点：
- 模块是同步加载的，代码在运行时加载依赖。
- 更适合于后端或环境中代码运行时动态加载依赖。

ES Module (ESM, `type: "module"`)

规范来源：ECMAScript 标准（现代 JavaScript）。
语法：
- 导入模块：import module from "module";
- 导出模块：export default someValue; 或 export { something };
特点：
- 模块是静态加载的，代码在编译阶段解析依赖。
- 提供更高的性能和优化潜力，比如 tree-shaking（移除未使用的代码）。

优缺点

在 Electron 中，你通常需要写两个部分的代码：

主进程代码：管理窗口、事件、和操作系统交互（典型文件是 main.js）。
渲染进程代码：与用户界面相关的前端代码（类似普通 Web 应用）。

这两部分可以分别使用 CommonJS 或 ESM，选择的设置主要影响 主进程 的代码。

CommonJS in Electron

特点：
- Electron 的核心 API（如 require("electron")）完全兼容 CommonJS。
- 大量的 Node.js 库原生支持 CommonJS。
- 更加成熟和广泛使用，适合 Electron 的传统开发模式。
优点：
- 与现有 Electron 项目和教程兼容，学习曲线低。
- 不需要调整 Node.js 中原生模块的使用方法。
缺点：
- 随着 JavaScript 的发展，ESM 正在成为标准规范，CommonJS 在新项目中使用率逐渐下降。
- 缺少 ESM 的一些高级功能（比如 tree-shaking）。

ESM in Electron

特点：
- Electron 和 Node.js 现在都支持 ESM，完全可以在项目中使用现代语法。
- 需要将所有模块改为 import 和 export 语法。
优点：
- 使用现代 JavaScript 语法，便于未来维护。
- 与前端代码统一（渲染进程通常是基于 ESM 的）。
- 更容易实现性能优化（如 tree-shaking）。
缺点：
- 如果依赖的库是 CommonJS 格式，需要额外处理（如用 createRequire 动态加载）。
- 部分旧库可能不支持 ESM。

应用场景

选择 `"commonjs"` 的场景

你是初学者，对 JavaScript 和 Electron 生态不熟悉。
项目需要大量使用旧的 Node.js 模块或教程。
你希望快速实现一个功能原型，不希望花时间调整代码结构。

选择 `"module"` 的场景

你想从一开始就使用现代 JavaScript 语法，保持代码的现代化。
项目有前后端代码统一为 ESM 的需求。
你需要依赖一些现代的 ESM-only 的库（如 node-fetch@3）。

如何选择和使用

保持 CommonJS

package.json:


json复制代码{
  "type": "commonjs"
}

主进程代码（main.js）：


javascript复制代码const { app, BrowserWindow } = require("electron");

app.whenReady().then(() => {
  const win = new BrowserWindow();
  win.loadFile("index.html");
});

优化点：

如果需要 ESM-only 的库（如


node-fetch@3

），用


dynamic import

：


javascript复制代码const fetchData = async () => {
  const { default: fetch } = await import("node-fetch");
  const data = await fetch("https://api.example.com").then((res) => res.json());
  console.log(data);
};

迁移到 ESM

package.json:
```
json复制代码{
  "type": "module"
}
```

主进程代码（main.js）：


javascript复制代码import { app, BrowserWindow } from "electron";

app.whenReady().then(() => {
  const win = new BrowserWindow();
  win.loadFile("index.html");
});

如果依赖 CommonJS 库，使用 createRequire：


javascript复制代码import { createRequire } from "module";
const require = createRequire(import.meta.url);
const fs = require("fs"); // 加载 CommonJS 模块

总结

如果你是初学者，并且希望快速开始，选择 CommonJS (type: "commonjs")。这能让你避免一些兼容性问题，同时与大部分 Electron 教程一致。
如果你希望项目与现代 JavaScript 保持一致并长期维护，选择 ESM (type: "module")，尤其是当你已经熟悉了 ESM 语法和工具。

两种方式都可以用在 Electron 项目中，选择适合你当前需求和学习阶段的即可。

目录