Electron 也是一个不错的轻量级跨平台应用开发框架,例如 Atom 和 Visual Studio Code 等就是用 Electron 开发的。Electron 在 macOS 下的安装非常方便,这里就单独来说一下 Windows 下的安装和配置。

Windows下的Electron

对于 macOS 用户来说,他们日常使用 Mac 都是不分区的,而且使用 npm 安装指令,基本上不需要调参。而对于 Windows 用户来说,我们有很多事情要做,例如 Node.js 的缓存目录更改,整合进 Windows Terminal 中,配置相关的用户环境变量等,需要一些调参,也有一些坑,所以这里给大家写一篇完整、详细、简单的教程,方便大家随时查阅和学习。

1.安装Node.js

Electron 依赖 Node.js 和 npm,所以我们先要安装这些,由于 Node.js 安装包附带 npm,所以我们只要下载安装 node.js 就行了。

Node.js 官网:https://nodejs.org/zh-cn/

我们在安装时,只需注意选上 Add to PATH 这个选项(应该是默认选择的)就行了,其他选项可以自己决定,或者保持默认。

Node.js 安装就这样很简单的结束了,接下来我们只要在终端中使用命令查看是否成功安装即可:

// 检查 node.js 版本
node -v

// 检查 npm 版本
npm -v

2.配置Node.js和npm

2.1 新建并移动缓存目录

我们一路安装下来还没有怎么配置呢,npm 的默认缓存目录都在 C 盘中:

C:\Users\yourname\AppData\Roaming\npm
C:\Users\yourname\AppData\Roaming\npm-cache

因为 npm 是 node.js 的一个子模块,所以我习惯把它整合进 node 的安装目录中,便于和 node 一起管理。我一般是在 node 的安装目录下,新建 node_cachenode_global 两个文件夹,把 npm 文件夹搬迁到 node_global,把 npm-cache 文件夹搬迁到 node_cache。

这样就很清晰明了:

  • node_cache 文件夹就是原先 npm-cache 文件夹,是 npm 的缓存目录
  • node_global 文件夹就是原先 npm 文件夹,就是全局安装 -global 的目录
  • 注意,本地 local 安装的 npm install 命令是安装在当前命令行所在目录,所以不影响这个

注意,此时默认的模块 D:\dev\nodejs\node_modules 目录,将会改变为 D:\dev\nodejs\node_global\node_modules 目录, 如果直接运行npm install等命令会报错的。 我们还需要增加环境变量 NODE_PATH。

我们使用如下命令,即可写入 .npmrc 文件:

npm config set cache "D:\dev\nodejs\node_cache"
npm config set prefix "D:\dev\nodejs\node_global"

.npmrc 文件在 C:\Users\yourname\ 目录下,也可以自己手动修改。

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache

2.2 修改缓存目录权限

我们新建的 node_cachenode_global 两个文件夹,默认权限是不对的,如果不进行修改,在使用 npm install 指令时,会报错 npm ERR! code EPERM

这是因为权限问题,要么我们要用管理员模式打开 Windows Terminal,要么就修改目录权限。

我们只要把 node_cache 和 node_global 两个文件夹,对 Users 用户进行授权就行了。

2.3 配置和修改用户环境变量

由于我们修改了 npm 的缓存目录,我们还得重新配置和调整用户环境变量。

添加 NODE_PATH 变量

我们新建一个变量,命名为 NODE_PATH,把 node_global\node_modules 文件夹的路径放进去:

修改 PATH 变量

编辑 PATH 变量,我们先将 C:\Users\yourname\AppData\Roaming\npm 这一条删去,替换为刚刚新建的 node_global 文件夹的路径:

配置完成后,我们再使用 init 重新生成配置,使用 list 命令进行目录检查是否正确:

npm init -y

npm list

如果没有出现 npm ERR! extraneous 的错误提示,那么一切就配置完成了。

3.npm换源或cnpm

由于国内网络环境,换源算是刚需的,否则你就要自己会配置代理。换源方法还挺多的,自己选择一种合适的就行了:

3.1 使用 cnpm

第一种方法是使用新指令 cnpm 安装:

// 安装 cnpm(使用的是淘宝源)
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 官方安装
npm install electron

// 国内源安装
cnpm install electron

这样我们就相当于同时拥有 npm 和 cnpm 指令,自己可根据网络环境选择不同的源安装。这种方式的优点是,我们可以保留 npm 官方源。

3.2 npm 换源

方法二,我们还可以直接换源,在用户变量中,增加 ELECTRON_MIRROR 的变量,填入以下配置:

ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

或者使用命令添加:

// 配置淘宝源
npm config set registry=https://registry.npm.taobao.org

// 移除淘宝源
npm config delete registry

还或者,你可以在上面提到的 .npmrc 文件中,手动添加:

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache
ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

3.3 使用代理

第三种方法,就是使用自己的代理软件:

// 添加代理
npm config set proxy=http://127.0.0.1:7890

// 移除代理
npm config delete proxy

这里面的 127.0.0.1 指的是本机地址,后面的 7890 是代理端口,这个要根据自己的代理软件决定。比如我用的小猫咪,这里面的端口信息都在这里标注的:

同理,你仍可以在 .npmrc 文件中手动添加:

prefix=D:\dev\nodejs\node_global
cache=D:\dev\nodejs\node_cache
proxy=http://127.0.0.1:7890

4.安装Electron

4.1 安装 Electron

好了,终于,Finally,我们要开始安装 Electron 了。

npm install -g electron --save-dev

全局安装完成之后,我们使用 electron -v 查看版本信息,是否正确被安装:

electron -v

然后你肯能会发现有如下的报错。说是 Windows 禁止运行脚本:

我们来查看 Windows PowerShell 的相关说明文档:《关于执行策略 – PowerShell》

PowerShell 执行策略是一项安全功能,用于控制 PowerShell 加载配置文件和运行脚本的条件。 此功能有助于防止恶意脚本的执行。

4.2 PowerShell 管理执行策略

输入 get-ExecutionPolicy,返回的是 Restricted,表明禁止,我们需要调整执行策略:

// 检查策略状态
Get-ExecutionPolicy

// 更改执行策略
Set-ExecutionPolicy RemoteSigned

// 恢复默认执行策略
Set-ExecutionPolicy Restricted

更改完成后,我们就可以查看 electron 版本了:

到此,我们终于成功完成了 Electron 的安装。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Next Post

Visual Studio Code配置C++环境与编译

周六 9月 11 , 2021
很多小伙伴们,由于一些原因,比如版权问题和轻量简便的问题等,想要让 Visual Studio Co […]

更多文章