前端开发环境搭建踩坑笔记——npm install node-sass安装失败的解决方案

Posted 2023-05-06 breezefaith

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发环境搭建踩坑笔记——npm install node-sass安装失败的解决方案相关的知识，希望对你有一定的参考价值。

问题背景
问题描述
解决方案
- 1. 检查node-sass安装版本是否正确。
- 2. 检查是否是网络问题
总结

问题背景

开发新的前端项目时，总少不了搭建开发环境和执行npm install安装依赖包，但npm install的过程总是充满着玄学，很难保证一次性成功，其中尤其以node-sass这个包的安装失败问题最为常见。
像其他npm包安装失败，通常是因为网络问题，可以采用使用更好的网络环境或者切换源的方式进行安装，比如使用淘宝的源进行安装，命令如下：

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

但node-sass安装失败这个问题似乎无法通过上述命令解决。本文将总结遇到此类问题时的解决方案。

问题描述

笔者的测试环境如下：

操作系统：Windows 11
Node版本：v14.16.0
Npm版本：6.14.11

遇到的node-sass安装失败的报错如下：

gyp ERR! find VS
gyp ERR! find VS msvs_version not set from command line or npm config
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS checking VS2022 (17.5.33530.505) found at:
gyp ERR! find VS "D:\\Program Files\\Microsoft Visual Studio\\2022\\Community"
gyp ERR! find VS - found "Visual Studio C++ core features"
gyp ERR! find VS - found VC++ toolset: v143
gyp ERR! find VS - missing any Windows SDK
gyp ERR! find VS could not find a version of Visual Studio 2017 or newer to use
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - not found
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************
gyp ERR! find VS
gyp ERR! configure error
gyp ERR! stack Error: Could not find any Visual Studio installation to use
gyp ERR! stack     at VisualStudioFinder.fail (D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\find-visualstudio.js:122:47)
gyp ERR! stack     at D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\find-visualstudio.js:75:16
gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\find-visualstudio.js:363:14)
gyp ERR! stack     at D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\find-visualstudio.js:71:14
gyp ERR! stack     at D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\find-visualstudio.js:384:16
gyp ERR! stack     at D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\util.js:54:7
gyp ERR! stack     at D:\\temp\\npm-temp\\node_modules\\node-gyp\\lib\\util.js:33:16
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:315:5)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
gyp ERR! System Windows_NT 10.0.22621
gyp ERR! command "C:\\\\Users\\\\zzcoder\\\\AppData\\\\Local\\\\nvs\\\\default\\\\node.exe" "D:\\\\temp\\\\npm-temp\\\\node_modules\\\\node-gyp\\\\bin\\\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd D:\\temp\\npm-temp\\node_modules\\node-sass
gyp ERR! node -v v14.16.0
gyp ERR! node-gyp -v v8.4.1
gyp ERR! not ok
Build failed with error code: 1
npm WARN npm-test@1.0.0 No description
npm WARN npm-test@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@8.0.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@8.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\\Users\\zzcoder\\AppData\\Roaming\\npm-cache\\_logs\\2023-05-06T06_13_42_083Z-debug.log

附上报错截图：

解决方案

1. 检查node-sass安装版本是否正确。

本地安装的node版本不同，需要安装的node-sass版本也是不一样的。node-sass官方给出了不同版本的node和node-sass的对应关系，读者可访问node-sass github仓库或者node-sass npm仓库进行查看。
本地安装的node版本，可以使用如下命令进行查看：

node -v

下图为截至node-sass@8.0.0版本时的对应关系。

在项目中还没有package.json或者有package.json但是此文件没有指定node-sass的版本时，默认会安装node-sass的最新版本。由于笔者安装的node版本时14.16.0，执行npm install node-sass命令默认安装了撰写本文时的node-sass最新版本8.0.0，所以才有了前文中报错。

根据版本对应关系，笔者应该安装node-sass的4.14+版本，因此需要将安装命令改为：

npm install node-sass@^4.14.0 --registry=https://registry.npm.taobao.org

这样就是使用淘宝源来安装node-sass的4.14+中的最新版本。

2. 检查是否是网络问题

在使用npm install安装node-sass时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。

npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

> node-sass@8.0.0 install D:\\temp\\npm-temp\\node_modules\\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node":

HTTP error ETIMEDOUT request to https://github.com/sass/node-sass/releases/download/v8.0.0/win32-x64-83_binding.node failed, reason: connect ETIMEDOUT 20.205.243.166:443

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@8.0.0 postinstall D:\\temp\\npm-temp\\node_modules\\node-sass
> node scripts/build.js

附上报错截图。

这种情况下仅使用--registry参数指定npm包的下载源是不够的，还需要使用--sass_binary_site参数指定sass二进制文件的下载源，因此需要将安装命令改为：

npm install node-sass@^4.14.0 --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

这样一来就是指定node-sass版本，指定npm包下载源为淘宝源，指定sass下载源为淘宝源，使用此命令基本就都能安装成功了。

总结

遇到node-sass安装失败时，可以使用以下命令：

# 查看本地node版本
node -v

# 安装node-sass
npm install node-sass@[本地node所对应的node-sass版本] --registry=https://registry.npm.taobao.org --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

通过下表查看版本对应关系，也可访问node-sass github仓库或者node-sass npm仓库进行查看。

欢迎批评指正。

weex开发学习笔记_环境搭建

weex开发之环境搭建

需要安装的软件

1、node.js

node.js使用C++语言编写的，采用Google Chrome浏览器的V8引擎；作用：JavaScript的运行环境。

node.js的安装包可以直接到官网上下载安装，安装高版本的node.js，都会自动安装好npm这个软件工具

下载链接： node.js下载路径

2、NPM

即Node包管理器(Node Package Manager)；以JavaScript编写的软件包管理系统，默认环境：Node.js

3、使用npm安装weex-toolkit

weex-toolkit 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex 项目的创建，调试以及打包等功能

遇到的问题

安装weex-toolkit遇到了问题，一直提示以下错误：

 
   
   
 
  
    
    
  npm ERR! tar.unpack unzip error C:\Users\ADMINI~1\AppData\Local\Temp\npm-17704-604b21f3\registry.npmjs.org\rx\-\rx-4.1.0.tgz
  
    
    
  npm ERR! tar.unpack untar error C:\Users\ADMINI~1\AppData\Local\Temp\npm-17704-604b21f3\registry.npmjs.org\rx\-\rx-4.1.0.tgz
  
    
    
  npm ERR! Windows_NT 10.0.16299
  
    
    
  npm ERR! argv "D:\\mySoft\\nodejs\\node.exe" "D:\\mySoft\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "weex-toolkit" "-g"
  
    
    
  npm ERR! node v7.6.0
  
    
    
  npm ERR! npm  v4.1.2
  
    
    
  npm ERR! code Z_BUF_ERROR
  
    
    
  npm ERR! errno -5
  
    
    
  
  
    
    
  npm ERR! unexpected end of file
  
    
    
  npm ERR!
  
    
    
  npm ERR! If you need help, you may report this error at:
  
    
    
  npm ERR!     <https://github.com/npm/npm/issues>
  
    
    
  
  
    
    
  npm ERR! Please include the following file with any support request:
  
    
    
  npm ERR!     C:\Users\Administrator\npm-debug.log

解决方法

使用命令：

 
   
   
 
  
    
    
  npm install npm -g

实现npm的更新安装

参考连接： NPM简介和基本使用

查看weex-toolkit版本

使用以下命令，验证是否安装成功

4、webpack

使用npm安装，安装命令如下：

 
   
   
 
  
    
    
  npm install webpack -g
  
    
    
  
  
    
    
  //若npm方式安装慢，可以使用以下方式进行安装
  
    
    
  cnpm install webpack -g

webpack的作用

把一切当成模块，模块打包的功能

5、安装java

由于国内网络环境的原因，安装会很慢

6、安装git

7、安装android-studio

安装android-studio是为了更好体验原生APP开发的感觉，否则安装好weex-toolkit即可进行weex项目的开发

安装好以上软件(工具)即可使用weex进行项目开发，此项目中，使用到vue这个前端框架

项目开发

一、创建项目目录

步骤1、使用weex命令建立weex项目目录

 
   
   
 
  
    
    
  weex create helloWeex

输入完以上命令时，如果系统没有安装weexpack，会提醒你进行安装，这个weexpack也可以自己单独安装。安装命令如下：

 
   
   
 
  
    
    
  npm install weexpack -g

温馨提示：需要等待一段时间

步骤2、cd进入到项目目录下，使用以下命令安装依赖包

 
   
   
 
  
    
    
  npm install
  
    
    
  
  
    
    
  //或
  
    
    
  
  
    
    
  cnpm install  【不推荐】

温馨提示：需要等待一段时间

二、添加Android应用支持

建立好项目的基本目录，还需要添加平台的支持，使用以下命令进行添加支持：

 
   
   
 
  
    
    
  weex paltform add android

安装需要等待一段时间

ios平台本demo不实现，添加成功后，项目根目录的platform下有Android文件夹

发布成Android应用

想在写完一段代码时进行预览效果，这时候就要使用run命令了。

 
   
   
 
  
    
    
  weex run android

这里是有一个坑，在命令执行完，它会报一个错误，错误是找不到安装设备。No android devices found.如果你自学这个坑会够你添一会的了。那这里我们安装的android-studio就派上用途了。

在Android Studio里运行weex

温馨提示

坑的重灾区

注意点

npm依赖node.js才能运行

使用npm安装软件时，结尾的-g表示安装全局的包

weex-toolkit安装，不能使用cnpm方式进行安装

weex开发学习文档

weex从入门到放肆

拓展知识点

1、vue-cli

vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名和vue init webpack 项目名两种

2、ESLint

用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格

参考链接：ESLint的简介

遇到的问题

1、使用命令创建weex项目时，提示“脚本”运行没有权限，具体错误提示如下：

 
   
   
 
  
    
    
  C:\Users\Administrator\AppDaa\Roaming\npm\node_modules\weex-toolkit\node_modules\xtoolkit\lib\installer\update_checker.vbs

解决方法：不理睬也可以正常跑项目

2、使用命令创建weex项目时，提示项目名字不能太长

使用helloWeex和hlWeex项目名时，提示以下错误：

 
   
   
 
  
    
    
   Sorry, name can no longer contain capital letters.
  
    
    
  
  
    
    
  //对不起，名称不能包含大写字母。

最后使用wxdemo作为weex的项目名

原因

weex项目名不能包含大写字母

以上是关于前端开发环境搭建踩坑笔记——npm install node-sass安装失败的解决方案的主要内容，如果未能解决你的问题，请参考以下文章

搭建vue开发环境

前端新手如何搭建webpack+react的开发环境

1Vue介绍环境搭建项目运行

webapp开发之bui入门环境搭建及执行npm命令报错解决

Windows 环境下vue+webpack前端开发环境搭建

weex开发学习笔记_环境搭建

前端开发环境搭建踩坑笔记——npm install node-sass安装失败的解决方案

问题背景

问题描述

解决方案

1. 检查node-sass安装版本是否正确。

2. 检查是否是网络问题

总结

weex开发学习笔记_环境搭建

weex开发之环境搭建

需要安装的软件

1、node.js

2、NPM

3、 使用npm安装weex-toolkit

遇到的问题

解决方法

查看weex-toolkit版本

4、webpack

webpack的作用

5、安装java

6、安装git

7、安装android-studio

项目开发

一、创建项目目录

步骤1、使用weex命令建立weex项目目录

步骤2、cd进入到项目目录下，使用以下命令安装依赖包

二、添加Android应用支持

发布成Android应用

在Android Studio里运行weex

温馨提示

注意点

weex开发学习文档

拓展知识点

1、vue-cli

2、ESLint

遇到的问题

1、使用命令创建weex项目时，提示“脚本”运行没有权限， 具体错误提示如下：

2、使用命令创建weex项目时，提示项目名字不能太长

原因

3、使用npm安装weex-toolkit

1、使用命令创建weex项目时，提示“脚本”运行没有权限，具体错误提示如下：