首页 > 其他分享 >macOS下由yarn与npm差异引发的Electron镜像地址读取问题

macOS下由yarn与npm差异引发的Electron镜像地址读取问题

时间:2023-05-23 15:14:02浏览次数:62  
标签:npm macOS process yarn electron env MIRROR config

记录macOS下由yarn与npm差异引发的Electron镜像地址读取问题

写在前面:该问题仅仅出现在Linux和macOS上,Windows上不存在该问题!

初始背景

最近笔者重新拾起了Electron,把最新版Electron的官方文档阅读了一遍。众所周知,Electron作为依赖在安装的时候,其二进制文件下载在国内一直以来都是问题(因为默认会从github上下载),好在现在Electron的官方文档已经写的非常详细了:安装指导 | Electron (electronjs.org),只需要配置一个镜像地址到.npmrc中:

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

记住这个大写的Key

笔者由于是新的机器,还没有配置改值,所以找到.npmrc文件的配置了上述的镜像后,便开开心心的准备进行项目搭建了。

问题出现

然而,当笔者准备使用yarn执行如下命令的时候,却出了问题:

yarn add -D electron

运行启动以后,在Electron安装的环境一直卡住了很久很久。

010-electron-install-pending

咦,难道镜像配置写错了吗?仔细对比以后,没有问题。难道因为我的网络访问很慢吗?等到访问超时以后,发现一个IP地址超时了,心想国内镜像再怎么也不应该超时,盲猜镜像地址没有生效。于是乎,准备尝试对下载Electron二进制文件的过程进行debug。

问题排查

首先定位到node_module/electron包,能够看到有一段安装后脚本执行命令(postinstall):

020-node_module-electron-scripts

关于postinstall的详细说明:scripts | npm Docs (npmjs.com)

也就是说,node_module/electron本身npm包install完成以后,还会执行其包内的install.js。

定位进入了node_module/electron包下的install.js,该脚本内部主要逻辑是先检查Electron的二进制缓存,如果不存在缓存,则使用来自@electron/get包中提供的downloadArtifact方法从远端下载Electron二进制制品文件。

030-installjs-flow

我们暂时先不看缓存读写的逻辑,着重了解远端下载的逻辑,所以我们进入@electron/get包中的downloadArtifact

040-@electron-get-npm

查看@electron/get包下的index.js内容:

050-@electron-get-core-download-script

前面我们提到,怀疑镜像地址没有生效导致下载超时,所以我们重点关注一下这里通过getArtifactRemoteURL方法得到的url值,

由于每一次这个包都会重新安装,我们不太好调试这个值,所以,我们做一个简单的trick:

  1. 找到这个包的缓存(macOS上的路径为:~/Library/Caches/Yarn/v6/npm-@electron-get-xxxx):

060-@electron-get-cache-location

  1. 找到上述indexjs代码,并添加一段日志打印:

070-modify-cached-@electron-get-indexjs

  1. 准备完毕以后,我们重新在demo项目下执行yarn add -D electron。执行以后,等到超时以后,发现控制台日志打印如下:

080-remote-url-is-github

Why!?为什么这个下载的Electron二进制文件地址依然是github的?于是,我们有必要进一步查看这个URL是如何得到。

继续查看代码,这个url来源于artifact-utils中的getArtifactRemoteURL方法,而这个方法里面关于最终返回的url最重要的部分是下图所示的base的值:

090-@electron-get-artifact-utils-getArtifactRemoteURL

而这个base值来源于mirrorVar这个方法:

100-@electron-get-artifact-utils-mirrorVar

根据上面代码的逻辑,name值为"mirror",options未使用,defaultValue为:

"https://github.com/electron/electron/releases/download/"

也就是说,在后面的逻辑中,如果没有从process.env中找到对应的值,那么就会使用默认的github官方制品地址的值。按照代码逻辑,运行到这个方法的时候,会从process.env中尝试获取:

  1. "NPM_CONFIG_ELECTRON_MIRROR"
  2. "npm_config_electron_mirror"
  3. "npm_package_config_electron_mirror"
  4. "ELECTRON_MIRROR"

环境变量—— 配置 | npm 中文网 (nodejs.cn)

任何以 npm_config_ 开头的环境变量都将被解释为配置参数。 例如,将 npm_config_foo=bar 放入您的环境中会将 foo 配置参数设置为 bar。 任何未赋值的环境配置都将被赋值为 true。 配置值不区分大小写,因此 NPM_CONFIG_FOO=bar 的工作方式相同。 但是,请注意,在 scripts 内部,npm 将设置自己的环境变量,并且 Node 会更喜欢那些小写版本,而不是您可能设置的任何大写版本。 详情见此问题

请注意,您需要使用下划线而不是破折号,因此 --allow-same-version 将变为 npm_config_allow_same_version=true

此外,如果是配置在npmrc里面的配置,也会在npm/yarn启动的时候被作为环境变量放到process.env中被访问。

那我们在.npmrc中配置的ELECTRON_MIRROR,在process.env中变成了什么呢?通过添加日志打印,我们会看到:

110-ProcessEnv-consolelog

120-ProcessEnv-npm_config_ELECTRON_MIRROR

可以看到,在process.env中,这个键为"npm_config_ELECTRON_MIRROR"npm_config小写,ELECTORN_MIRROR大写)。我们知道,nodejs中object对象的属性值是大小写敏感的!所以,当上面的mirrorVar代码运行,尝试获取process.env中的值的时候,根本找不到了,因为没有"NPM_CONFIG_ELECTRON_MIRROR""npm_config_electron_mirror""npm_package_config_electron_mirror""ELECTRON_MIRROR"这些属性。

然而,如果我们使用npm进行安装的时候:

npm install -D electron

又能够很快安装。Why?!难道npm和yarn下的运行环境有差异吗?为了验证,我们编写一个简单的index.js代码:

console.log("process.env['npm_config_electron_mirror']", process.env['npm_config_electron_mirror']);
console.log("process.env['NPM_CONFIG_ELECTRON_MIRROR']", process.env['NPM_CONFIG_ELECTRON_MIRROR']);
console.log("process.env['npm_config_ELECTRON_MIRROR']", process.env['npm_config_ELECTRON_MIRROR']);

然后,在package.json中添加脚本:

{
  "name": "simple-electron-main-app",
  "version": "1.0.0",
  "scripts": {
+   "start": "node index.js"
  },
  "devDependencies": {}
}

最后,我们分别使用yarn(yarn start)和npm(npm run start)来运行脚本:

130-yarn-and-npm-diff

在yarn运行上下文中,.npmrc中的"ELECTRON_MIRROR"直接拼接到了"npm_config_"后边,作为process.env的一个属性,所以你只能访问process.env["npm_config_ELECTRON_MIRROR"]得到值;

在npm运行山下文中,.npmrc中的"ELECTRON_MIRROR"首先被转为了小写,然后拼接到了"npm_config_"后边,作为了process.env的属性,所以你需要访问process.env["npm_config_electron_mirror"]来得到值。

macOS解决方式

终于,我们能解释为什么当我们在.npmrc配置大写的ELECTRON_MIRROR的时候,使用yarn add -D electron安装electron的时候,二进制镜像地址没有生效了。那么,解决的办法也非常简单,两种:

  1. .npmrc配置改为小写key:electron_mirror="https://npmmirror.com/mirrors/electron/"
  2. 使用npm上下文环境进行安装。

个人更加建议按照第一种方式配置,不然大小写敏感的坑太容易发生了。

关于Windows的特别说明

process.env | Node.js API 文档 (nodejs.cn)

在 Windows 操作系统上,环境变量不区分大小写。

const { env } = require('node:process');

env.TEST = 1;
console.log(env.test);
// => 1

也就是说,在Windows机器上,即使process.env中的key为"npm_config_ELECTRON_MIRROR",你也可以通过"npm_config_electron_mirror"或者是"NPM_CONFIG_ELECTRON_MIRROR"来访问这个值:

140-windows-npmrc

150-process-env-Windows-output

标签:npm,macOS,process,yarn,electron,env,MIRROR,config
From: https://www.cnblogs.com/w4ngzhen/p/17425229.html

相关文章

  • macOS 上修改 hosts 文件后刷新DNS
    打开终端:在Launchpad中打开"终端"应用程序,或者通过在Spotlight中搜索"终端"并打开它。输入刷新命令:在终端中输入以下命令并按下回车键:sudokillall-HUPmDNSResponder这将发送刷新DNS缓存的信号。输入密码:您可能需要输入管理员密码来执行sudo命令。在输......
  • 如何在 macOS 上进行 STM32 开发 All In One
    如何在macOS上进行STM32开发AllInOne网上好多STM32的教学视频的开发环境都是基于Windows系统的,对macOS用户直接劝退了solutions在Mac上安装虚拟机,在虚拟机中运行Windows系统......
  • MapReduce和Yarn原理
    MapReduce原理 问题1.什么是计算,什么是分布式计算?答案:计算指的是从海量数据中提取出有效的价值信息的过程(广义上解释),狭义上指的是1+1=2即:数学运算.分布式计算指的是多台机器协调,共同完成同1个计算任务.问题2:分布式计算的两种模式?答案:分散汇......
  • VUE npm run serve 提示error Mixed spaces and tabs no-mixed-spaces-and-tabs 解决
    解析:看这个错误提示意思就是“不允许代码中出现空格和tab键混合的情况”大多数代码约定要求使用空格或tab进行缩进,禁止使用空格和tab混合缩进。因此,一行代码同时混有tab缩进和空格缩进,通常是错误的。解决办法:原因找到了,解决办法就是找到spaces和tabs混合的地方,然后统一即可!......
  • Node & NPM upgrade
     Node和Npm升级节奏都非常快,因此版本升级是Noder经常回碰到的事情.NPMnpm升级非常方便,直接使用npm就可以1$npmupdate-gnpmnpm卸载方法如下1$sudonpmuninstallnpm-g如果该方法失败,可以先获取npm源代码,然后$sudomakeuninstallNode关于Node的安装之前......
  • [nodejs]国内npm安装nodejs modules失败的几个解决方案
    使用npm安装node模块时经常有卡住安装失败的情况,如图所示。原因在于npm服务器在美国,还有就是某强大的防火墙作用。这样的问题导致很多新手放弃使用node,几乎每天都有新手再问这个问题。现在分享一下解决这个问题的解决方案1.可以通过一劳永逸的方式修改代理地址2.更换npm源拼rp (......
  • 小程序提示没有找到可以构建的NPM包解决方法
    小程序提示没有找到可以构建的NPM包解决方法 微信小程序开发者工具提示没有找到可以构建的NPM包或者提示XXXX/XXXX/XXXX.json文件内容错误,请确认需要参与构建的npm在miniprogramroot目录,如果没有请按照一下方法进行解决,本内容适用于大多数错误。安装node.js环境......
  • nodejs npm国内镜像
    镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):1.通过config命令npmconfigsetregistryhttp://registry.cnpmjs.orgnpminfounderscore(如果上面配置正确这个命令会有字符串response)2.命令行指定npm--registryhttp://registry.cn......
  • macOS Monterey 12.6.6 (21G646) 正式版发布,ISO、IPSW、PKG 下载
    本站下载的macOS软件包,既可以拖拽到Applications(应用程序)下直接安装,也可以制作启动U盘安装,或者在虚拟机中启动安装。另外也支持在Windows和Linux中创建可引导介质。2023年5月18日(北京时间19日凌晨),Apple为那些无法更新macOSVentura的旧Mac发布了macOSBig......
  • macOS Big Sur 11.7.7 (20G1345) 正式版 ISO、PKG、DMG、IPSW 下载
    本站下载的macOS软件包,既可以拖拽到Applications(应用程序)下直接安装,也可以制作启动U盘安装,或者在虚拟机中启动安装。另外也支持在Windows和Linux中创建可引导介质。2023年5月18日(北京时间19日凌晨),Apple为那些无法更新macOSVentura的旧Mac发布了macOSBig......