【electron】实战技巧（持续更新，不要错过喔）

🛫 导读

需求

使用electron过程中，经常遇到各种问题，有些解决过，时间长了又忘掉了，特此记录。

开发环境

1️⃣ nvm处理多node环境

NVM（Node Version Manager）是一个用于在不同项目中管理多个 Node.js 版本的工具。它可以让你在不同的项目中使用不同的 Node.js 版本，而不需要在系统中安装多个版本的 Node.js。NVM 能够通过管理系统中多个版本的 Node.js 来帮你解决版本冲突的问题。
使用说明，可以参考文章《【nvm】【node多版本管理工具】使用说明和踩坑https://blog.csdn.net/kinghzking/article/details/126186648》。

避免node版本切换

• 问题：
  开发过程中经常遇到项目使用的版本不一致（版本16.16.0和18.16.0等，32和64位），导致经常切换的情况。
  如果不切换，会因版本不一致，出现各种错误信息。

• nvm原理：
  如何做到不切换又保证使用正确的node版本呢？
  我们先了解下nvm的原理，下面图中可以看出，nvm巧妙的使用快捷方式实现各个版本的切换！！！
  所以，我们如果能让我们的环境直接指定到nvm下的目录，就可以不再切换版本了。
  

• 方案：
  执行命令前通过set PATH=修改环境路径，示例：set PATH=%APPDATA%\\nvm\\v18.16.0\\node.exe;%PATH% && electron ."。

• 为了避免重复代码，可以将set PATH=设置为一条命令（如setNode32），然后执行别的命令前通过npm run setNode32或者npm-run-all setNode32等命令执行一次路径设置，如下图所示：
  

指定32位/64位

nvm安装命令为：nvm install [version] [arch]，其中arch就是指定32位还是64位的
例如：

• nvm install 18.16.0 安装node v18.16.0 ，未指定arch时，根据系统位数安装不同的版本。
• 如果64位电脑需要安装32位的， 则运行：nvm install 18.16.0 32

2️⃣ 常用node库

electron开发环境一般都是vscode+node，其实就是node开发的常用库，这里列举一些好用的库，很多项目都会使用到的。

npm-run-all（脚本运行工具）

这个工具是为了解决官方的 npm run 命令无法同时运行多个脚本的问题，它可以把诸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:* 这样精致小巧的模样。

安装：

• npm install npm-run-all --save-dev

这个包提供三个命令，分别是 npm-run-all run-s run-p，其中后两个都是 npm-run-all 带参数的简写，分别对应串行和并行。

• 顺序执行：npm-run-all clean lint build
• 并行执行：npm-run-all --parallel lint build
• 也可以混合执行，如：npm-run-all a b --parallel c d --sequential e f --parallel g h i

cross-env（配置环境变量）

cross-env 是一个 Node.js 模块，用于在不同的环境中管理运行时变量。例如，通过 cross-env，你可以在生产环境中设置不同的环境变量，而在开发环境中设置不同的环境变量。使用 cross-env，你可以在代码中方便地设置环境变量，而不需要手动在命令行中设置它们。

例如，你可以使用以下命令设置环境变量：
cross-env NODE_ENV=production node app.js
此命令将设置环境变量 process.env.NODE_ENV 为 production，然后运行 app.js 脚本。

下面示例，表示不同的BUILD_TARGET运行node命令：

dotenv（配置文件）

dotenv是一个零依赖模块，它将环境变量从 .env 文件加载到 process.env 中。dotenv提供许多的方法，最常用的是dotenv.config()。
dotenv.config()读取一个.env文件，解析其内容，将.env文件中声明的环境变量合并进process.env，然后返回一个对象result。result.parsed是解析出的内容，result.error是在解析失败的时候返回的一个标识。 通常我们只需要进行dotenv.config() 操作，不需要关心result。

下面是配置（.env）、示例代码及运行结果示例：

minimist（命令行解析）

node.js的命令行参数解析工具有很多，比如：argparse、optimist、yars、commander。
optimist和yargs内部使用的解析引擎正是minimist，如果你喜欢轻量级的技术，那么minimist足够简单好用，代码量也很少（只有几百行），非常适合研读。

minimist的特性比较全面:

• short options
• long options
• Boolean 和 Number类型的自动转化
• option alias

简单示例：
node minimist.js lushuixi 16 --template vue --name --age=16 -f --price 2.5120

import minimist from 'minimist'

var argv = minimist(process.argv.slice(2));
console.log(argv);

/*
运行结果：
{
  _: [ 'lushuixi', 16 ],
  template: 'vue',
  name: true,
  age: 16,
  f: true,
  price: 2.512
}
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

更多参数示例：
参数--sex如果指定了（不管后面有没有值），会解析为true。
而参数--sanhaosheng未指定，被解析为了false。

import minimist from 'minimist'

var argv = minimist([
    "lushuixi", "16", "--template", "vue", "--name", "--age=16", "--sex=女"
  ], {
    boolean: ["sanhaosheng"],
    "--": true, //
});
console.log('\n\n', argv);

/*
运行结果：

 {
  _: [ 'lushuixi', 16 ],
  sanhaosheng: false,
  template: 'vue',
  name: true,
  age: 16,
  sex: true,
  '--': []
}
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

listr2

listr2 是一个易于使用的 Node.js 包，可以用来创建生动的、可以交互的 CLI 界面、任务列表。类似的库还有consola。
我们可以利用这个库实现自己的 CLI 、管理任务、优化控制台显示等。

贴一个官方的示例图，来便于理解：

下面编写个测试用例，看下效果：

import { Listr } from "listr2";

const tasks = new Listr([
  {
    title: "任务1  立即执行完成",
    task: () => {
      console.log("执行任务1");
    },
  },
  {
    title: "任务2  等待3s后才执行完成",
    task: () =>
      new Promise(resolve => {
        setTimeout(() => {
          console.log("执行任务2");
          resolve();
        }, 3000);
      }),
  },
  {
    title: "任务3  等待3s后才执行失败",
    task: () =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log("执行任务3");
          reject();
        }, 3000);
      }),
  },
]);

tasks
  .run()
  .then()
  .catch(err => {});


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

3️⃣ electron命令行

chrome命令行

electron内部使用的chrome，支持大部分chrome的命令行，这里不再细数。

自定义命令行

一直以来都只使用过electron命令行只有electron .，最近需要指定某文件来启动脚本，所以研究了一波。
先看下运行electron会显示什么内容：
Usage: electron [options] [path]

从图中我们可以发现，其options可选项基本没啥用途（至少目前没用到过）。
path包含多种形式，直接传递文件名即可指定不同的入口文件了！！！

ps: --interactive感觉像是交互式的方式打开，类似python，可惜该选项不支持windows!!!，所以目前没测试该功能。

4️⃣ electron-builder

electron-builder作为官网推荐的打包工具，其功能十分复杂。这里只描述几个遇到的问题。

不编译nsis

编译过程中，出现下面的building过程，该过程及其耗时，最终编译出一个Setup.exe，这个在测试过程中毫无意义。
我们今天的目标就是取消该选项。

查看文档https://www.electron.build/configuration/win，可以看出target支持十几种类型：nsis, nsis-web (Web installer), portable (portable app without installation), appx, msi, squirrel, 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir。
其中最可疑的就是dir，我们修改它就不会编译nsis了。

不编译asar

还是上面的图，有一个asar的选项，被禁用掉了，这样也可以节省很多的编译时间。
如下图修改package.json中的build字段内容即可。

5️⃣ TODO：分发（升级）

electron自带有分发功能（Electron Forge），目前工作中都是自己编写更新功能，没使用自带的功能，以后有机会再看吧，应该会节省很多资源和时间。

TODO

🛬 文章小结

electron包罗万象，这里只是简单的总结了遇到的问题，有兴趣的同学可以自己多翻翻官方文档，会有以外收获喔。

📖 参考资料

• 官网文档 https://www.electronjs.org/zh/docs/latest/
• 【nvm】【node多版本管理工具】使用说明和踩坑 https://blog.csdn.net/kinghzking/article/details/126186648
• nodejs环境变量 、.env文件以及dotenv的使用 https://juejin.cn/post/6993224664705138702#heading-8
• 解析命令行参数第三方包之minimist https://juejin.cn/post/7160597511495745550#heading-19