初步认识Electron2，electron-builder打包exe文件

Electron程序快速上手，electron使用electron-builder打包exe文件

1、electron-builder 使用

electron-builder可以生成多种目标格式：Windows：（安装程序）、（Web 安装程序）、（无需安装的便携式应用程序）、AppX（Windows 应用商店）、MSI、Squirrel.Windows。nsis nsis-web portable

官网强烈建议使用 yarn 而不是 npm。

1	yarn add electron-builder --dev

目前就使用npm进行尝试。

2、yarn（暂时不用）

1 2	yarn yarn add electron-builder --dev

package.json文件完整如下。

{
  "name": "electron_app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "app:dir": "electron-builder --dir",
    "app:dist": "electron-builder"
  },
  "keywords": [],
  "author": "erik.xie",
  "license": "ISC",
  "description": "my_electron_app",
  "devDependencies": {
    "electron": "^33.0.2",
    "electron-builder": "^25.1.8"
  },
  "build": {
  "appId": "app.netlify.eriknote",
  "mac": {
    "category": "public.app-category.utilities"
  }
}
}

#生成应用的目录结构（不会打包成可执行文件）：
yarn app:dir
#生成可执行文件和安装包：
yarn app:dist

3、NPM

3.1、NPM 镜像

NPM 修改为使用 cnpm（淘宝的 NPM 镜像）。

3.1.1、全局安装 cnpm

全局安装 cnpm（如果尚未安装）：

1	npm install -g cnpm --registry=https://registry.npmmirror.com

修改 NPM 配置：你可以将 NPM 的默认注册源更改为 cnpm。使用以下命令：

1	npm config set registry https://registry.npmmirror.com

验证配置：运行以下命令以确保 NPM 的注册源已正确更改：

1	npm config get registry

如果输出是 https://registry.npmmirror.com，那么配置成功。

使用 cnpm 安装依赖：现在，你可以用 cnpm 命令来代替 npm 安装依赖。例如：

1	cnpm install <package-name>

3.1.2、npmrc 文件

.npmrc 文件来配置 npm 使用 cnpm 的镜像。electron 淘宝镜像配置 .npmrc 文件 | 李钟意讲前端

创建或编辑 .npmrc 文件：在你的项目根目录下创建或编辑一个名为 .npmrc 的文件。你也可以在用户目录（如 ~/.npmrc）中进行全局配置。

添加 cnpm 源：在 .npmrc 文件中添加以下内容：

registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
sqlite3_binary_host_mirror=https://npmmirror.com/mirrors/sqlite3/
# sass_binary_site=https://npmmirror.com/mirrors/node-sass/
chromedriver_cdnurl=https://npmmirror.com/mirrors/chromedriver/
operadriver_cdnurl=https://npmmirror.com/mirrors/operadriver/
fse_binary_host_mirror=https://npmmirror.com/mirrors/fsevents/

npm config get registry验证配置注册源已正确更改

使用 npm 安装依赖：现在，当你使用 npm 安装依赖时，它将自动使用配置的 cnpm 镜像源：

1	npm install <package-name>

3.2、electron-builder使用

cls
npm i
npm cache clean --force
npm cache verify
cnpm i electron-builder -D

出现警告，但是不影响使用，使用cnpm outdated命令进行检查项目中的依赖包。

1	cnpm outdated

electron-builder 需要 electron-builder-squirrel-windows 作为对等依赖，但该依赖没有被安装。你可以手动安装这个依赖：

1	cnpm install electron-builder-squirrel-windows@25.1.8 -D

指定 build 配置，将 scripts 键添加到开发中：package.json

"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}

"scripts": {
  "app:dir": "electron-builder --dir",
  "app:dist": "electron-builder"
}

package.json完整的记录如下：

{
  "name": "electron_app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "app:dir": "electron-builder --dir",
    "app:dist": "electron-builder"
  },
  "keywords": [],
  "author": "erik.xie",
  "license": "ISC",
  "description": "my_electron_app",
  "devDependencies": {
    "electron": "^33.0.2",
    "electron-builder": "^25.1.8",
    "electron-builder-squirrel-windows": "^25.1.8"
  },
  "build": {
  "appId": "app.inetlify.eriknote",
  "mac": {
    "category": "public.app-category.utilities"
  }
  }
}

3.3、打包

根据package.json的scripts标签中

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "electron .",
  "app:dir": "electron-builder --dir",
  "app:dist": "electron-builder"
},

（目前使用的）根据 scripts 配置，你可以使用以下命令来运行相应的脚本。

1 2	npm run app:dir cnpm run app:dir # 或者使用

这个命令会使用 electron-builder 生成应用的目录结构，而不会打包成一个可执行文件。

1	npm run app:dist

这个命令会使用 electron-builder 打包你的应用，生成可执行文件和安装包。

3.4、小提示

运行npm run app:dir时候会从github上下载资源，下载不下来。解决方法需要在.npmrc 文件中添加内容完全。

我的项目地址：
通过百度网盘分享的文件：3.electron
链接：https://pan.baidu.com/s/1OkF5N4YGA5oIjE9Xx3eWcA
提取码：8edx

4、其他科普

FTWA（Free The Web Apps） 并不完全等同于 Electron，但它是基于 Electron 的一款工具或框架，专门用于将网页应用快速封装为桌面应用程序。它利用了 Electron 的底层技术，但在此基础上做了一些优化和功能封装。

4.1、FTWA 与原生 Electron 的区别

特性	FTWA	Electron
开发复杂度	简单，配置 URL 和参数即可完成打包	需要手动编写代码和配置
功能扩展能力	有限，适合简单网页封装应用	功能强大，支持复杂的桌面应用开发
定制化程度	较低，依赖 FTWA 提供的默认功能	极高，可以完全定制应用行为
适用场景	快速打包网页应用（如 PWA）	开发复杂的桌面应用（如 VSCode、Slack）
依赖	基于 Electron，简化了使用流程	直接使用 Electron 底层 API，需要更多开发工作