安装

系统环境

安装 nodejs，npm，git，vscode 等必须工具。

初始化

# 选择一目录
mkdir electron-app && cd electron-app

# 初始化npm
npm init

# 安装
pnpm add -D electron

配置

修改 package.json 配置

"scripts": {
  "start": "electron ."
}

添加主程序文件

app.js 和 index.html

目录（大概）

目录结构可以自定义控制

- node_modules
- app.js
- index.html
- package.json
- forge.config.js
- .gitignore

启动

# 预览
pnpm start

编译打包

官方推荐使用 Electron Forge 打包，方式不止这一种，比如：electron-builder。

pnpm add -D @electron-forge/cli
# 自动安装依赖，也可以手动
npx electron-forge import

pnpm add -D @electron-forge/cli @electron-forge/maker-deb @electron-forge/maker-rpm @electron-forge/maker-squirrel @electron-forge/maker-zip @electron-forge/plugin-auto-unpack-natives

{
  // ...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.3.1",
    "@electron-forge/maker-deb": "^7.3.1",
    "@electron-forge/maker-rpm": "^7.3.1",
    "@electron-forge/maker-squirrel": "^7.3.1",
    "@electron-forge/maker-zip": "^7.3.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
    "electron": "^29.1.5"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
  // ...
}

config.forge.js

const { FusesPlugin } = require("@electron-forge/plugin-fuses");
const { FuseV1Options, FuseVersion } = require("@electron/fuses");

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: "@electron-forge/maker-squirrel",
      config: {},
    },
    {
      name: "@electron-forge/maker-zip",
      platforms: ["darwin"],
    },
    {
      name: "@electron-forge/maker-deb",
      config: {},
    },
    {
      name: "@electron-forge/maker-rpm",
      config: {},
    },
  ],
  plugins: [
    {
      name: "@electron-forge/plugin-auto-unpack-natives",
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

执行编译

yarn make

# 输出
- out 文件

🎉

快速了解，无应用场景不深入研究