【莫得办法】——安装node-sass失败驱动学习npm镜像

·  阅读 246

前言

不知道大家在接触一个新项目时是怎么去快速理解其中的业务的,我的方式就是先让它可以运行。运行起来的后面是事情才有的谈。

启动项目第一步

npm install
复制代码

可就在今天,它失败了,本想着快速在谷歌上搜索一下解决方案就完事了没想到自己一步步陷入了一个深不见底的巨坑。

就在今天,我在拉取公司项目之后准确下载相关依赖时,控制台给我报了这样一个错 然后我切换源之后又报了这个错

image.png

然后我带着错误信息到百度谷歌去搜索时发现了和我一样的大量受害者,他们也给出了许多回答,可是大部分回答知识浅尝辄止,既不说出现错误原因,也不谈解决方案的原理。

在翻阅大量文章之后,终于让我找到了一篇系统的相对具有说服力的文章来解决安装node-saa失败这个问题。 链接我会放在文章末尾。

一.是否是因为没有切换源而导致的?

众说周知,因为国内网络环境的因素,当我们使用npm去下载一些包的时候,往往会出现下载过慢甚至下载失败的情况。因此有些经验的程序员会在安装完Node之后立马切换npm的镜像,比如切换成淘宝源。

npm config set registry https://registry.npm.taobao.org/
复制代码

这样我们可以使用npm下载包的时候大幅度速度从而避免下载失败。

这是我刚开始以为下载失败的原因,所以我立马切换成了淘宝源,可是事情没那么简单。切换成淘宝源之后,之前的错误消失了,可有出现了新的错误。

二.切换源没错,错的是依赖包

显然,在切换源之后,下载速度提高了,可是安装的模块如果有依赖c++模块的,安装过程中会隐式的安装node-gyp,node-gyp用来编译这些依赖c++模块的模块。

这还不要紧,致命的是node-gyp在首次编译时会依赖Node源码,所以又悄悄去下载Node。虽然在前面已设置了淘宝镜像,但是在这里一点卵用都没有。这样又因为国内网络环境的原因,再次遇上安装过慢安装失败的情况。

王德发?太搞人心态了吧。

还好npm config提供了一个参数disturl,它可设置Node镜像地址,当然还是将其指向国内的淘宝镜像。这样又能爽歪歪安装这些依赖C++模块的模块了。

npm config set disturl https://npm.taobao.org/mirrors/node/
复制代码

三.磨人的小妖精node-sass

前面这两部操作面对一般的模块安装是没问题的可是有一些模块,哎,它就是不想让你好受,其中的代表者就是node-sass,这玩意靠前两步的操作还解决不了。

你要是强行安装的话,极有可能报这样的错

原因是什么呢?

安装node-sass时,在install阶段会从Github上下载一个叫binding.node的文件,而「GitHub Releases」里的文件都托管在s3.amazonaws.com上,这个网址被Q了,所以又安装不了。

那是不是就没办法解决了呢?肯定不是啊,不然我写这篇文章干嘛,闲的蛋疼吗?

我们从node-sass的官方文档中可找到一个叫sass_binary_site的参数,它可设置Sass镜像地址,毫无疑问还是将其指向国内的淘宝镜像。这样又能爽歪歪安装node-sass了。

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
复制代码

嘻嘻,问题到这就差不多要解决了。

为什么我要说差不多呢?

😭

因为我遇到的问题除了前面的哪些还有就是node版本与node-sass版本不兼容

mmp

最后我的解决方法是在我电脑中找到存放node-sass的文件夹,一般是C:\Users\AppData\Roaming\npm-cache\node-sass这里,然后将网上下载的win32-x64-46_binding.node文件直接放到这个文件夹里面问题就解决了。但显然这并不是一个好的解决方案。

正确的解决方法,应该是切换到正确的node版本重新下载对应的node-sass模块。对应关系如图所示

111.png

四.懒人必备的最终解决方案

如果你觉得前面这些知识你不想知道,也觉得不重要的话。ok,没关系,你可以直接这样做。

第一步:查看自己的node版本与项目中package.json的node-sass版本是否如下表对应。

如果对应,进行第二步,如果不对应,请使用切换node或node-sass版本。

第二步:切换镜像

使用下列命令切换镜像,我这里使用的是淘宝镜像

npm config set registry https://registry.npm.taobao.org/
复制代码

你也可以使用nrm切换镜像,具体使用可以看彩蛋

第三步:设置Sass镜像地址

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
复制代码

这里可以举一反三,对于另外一些有着同样问题的包,也可以这样解决。

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set sharp_dist_base_url https://npm.taobao.org/mirrors/sharp-libvips/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set puppeteer_download_host https://npm.taobao.org/mirrors/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set sentrycli_cdnurl https://npm.taobao.org/mirrors/sentry-cli/
npm config set sqlite3_binary_site https://npm.taobao.org/mirrors/sqlite3/
npm config set python_mirror https://npm.taobao.org/mirrors/python/
复制代码

第四步:暴力解决

直接从网上下载win32-x64-46_binding.node,然后复制粘贴到node-sass所在的文件夹中。当然,不到万不得已,不要这样去做。

【彩蛋一——npm镜像管理nrm】

npm包有很多的镜像源,有的源有的时候访问失败,有的源可能没有最新的包等等,所以有时需要切换npm的源,nrm包就是解决快速切换问题的。 nrm可以帮助您在不同的npm源地址之间轻松快速地切换。

nrm内置了如下源:

推荐使用淘宝镜像或cnpm

1.安装

npm i -g nrm
复制代码

2.查看是否安装成功:nrm --version

~ nrm --version

1.0.2
复制代码

3.列出可选择的源:nrm ls

~ nrm ls

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/
复制代码

注: 前面带 * 号的表示正在使用的源

4.切换使用的源:nrm use npm

nrm use npm

~ nrm use npm
                        
   Registry has been set to: https://registry.npmjs.org/
复制代码

5.添加一个源:nrm add registry url

如果你想添加一个源,终端执行命令nrm add <registry> <url> [home],reigstry为源名,url为源的路径, home为源的主页(可不写)。

~ nrm add company http://npm.company.com/   

    add registry company success
复制代码

注:

  1. URL最后的/也可以不带,下面两个URL都是可以的: http://npm.company.com/ http://npm.company.com
  2. [home]参数用于nrm home命令,用来查看源的主页。

6.删除一个源:nrm del registry

想要删除一个源,终端执行命令nrm del <registry>,reigstry为源名.

~ nrm del company

    delete registry company success
复制代码

:nrm del 命令不能删除nrm自己内置的源。

7.测试源速度:nrm test

测试一个源的响应时间:nrm test npm

~ nrm test npm

* npm ---- 833ms
复制代码

测试所有源的速度:nrm test

~ nrm test

* npm ---- 807ms
  cnpm --- 374ms
  taobao - 209ms
  nj ----- Fetch Error
  rednpm - Fetch Error
  npmMirror  1056ms
  edunpm - Fetch Error
复制代码

8.不使用nrm来切换源

如果不是nrm也能切换源,只不过比较麻烦

查看当前使用的源

npm config get registry

~ npm config get registry
https://registry.npmjs.org/
复制代码

设置一个源

npm config set registry https://registry.npm.taobao.org/

~ npm config set registry https://registry.npm.taobao.org/
复制代码

设置成功后终端不会有任何输出。

  • 安装包使用特定源

    全部使用特定源安装:

    npm install --registry=https://registry.npm.taobao.org

    安装一个包使用特定源:

    npm i logo --registry=https://registry.npm.taobao.org

【彩蛋二——nvm管理node】

关于nvm的使用菜鸟教程写的不错,使用 nvm 管理不同版本的 node 与 npm

参考链接

聊聊NPM镜像那些险象环生的坑

npm源管理器nrm使用教程

分类:
前端
标签: