NPM常见问题

时间:2024-06-14 10:26:38

文章目录

  • NPM常见问题
    • 1. 使用淘宝源安装包出错
    • 2. listen EADDRINUSE 服务端口被占用报错
    • 3. npm start 启动后过一会崩溃结束:内存溢出
    • 4. npm install的时候使用特定的源安装
    • 5. npm安装指定版本、最新版本
    • 6. npm ERR! cb() never called! 解决
    • 7. Unable to authenticate:认证失败
    • 8. 查看项目中是否安装了特定包
    • 9. TypeError: compilation. templatesPlugin is not a function
    • 10. npm install 报错:npm :this is an error with npm itself.
    • 11. Error: Cannot find module 'webpack' 问题解决办法

NPM常见问题

1. 使用淘宝源安装包出错

使用npm安装webpack包的时候,发生了错误

npm install webpack --save-dev
   // 发生如下错误
   events.js:160░░░░░░⸩ ⠸ extract:repeat-string: sill extract remove-trailing-sepa
         throw er; // Unhandled 'error' event
         ^
   Error: write after end
       at writeAfterEnd (_stream_writable.js:193:12)
       at PassThrough.Writable.write (_stream_writable.js:240:5)
       at PassThrough.Writable.end (_stream_writable.js:477:10)

后来查看安装源是淘宝的,换源可以解决这个问题:

设置npmjs的源(可能需要VPN),如果https不行就换成http的。

// 查看安装源
npm config get registry 	

// 设置npm自己的源
npm config set registry https://registry.npmjs.org/
npm config set registry http://registry.npmjs.org/

// 设置为淘宝源
npm config set registry https://registry.npm.taobao.org/
npm config set registry http://registry.npm.taobao.org/

这个问题有的时候会发生,有时没问题,看人品了。

还有一种情况,使用淘宝源: 使用公司网络安装失败,但是使用自己网络则安装成功。

2. listen EADDRINUSE 服务端口被占用报错

npm start

> webpack-dev-server --config ./config/webpack.config.dev.js

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: listen EADDRINUSE 127.0.0.1:8080
    at Object.exports._errnoException (util.js:1018:11)
    at exports._exceptionWithHostPort (util.js:1041:20)
    at Server._listen2 (net.js:1258:14)
    at listen (net.js:1294:10)

当使用npm start启动一个web开发服务时,显示上面错误,经查找是端口(8080)被占用了。

解决方法:

  1. 换一个端口,重新运行即可。
  2. 找到被占用的端口,关掉占用的端口,重新运行即可。
// 查看是哪个进程占用的端口
~ sudo lsof -n -P | grep :8080
node      6534             dragon   14u     IPv4 0x3cf6bb332552824d        0t0        TCP 127.0.0.1:8080 (LISTEN)

// 关闭这个服务
kill -9 6534

3. npm start 启动后过一会崩溃结束:内存溢出

当使用npm start启动服务后,由于修改代码,导致服务频繁编译,由此导致内存溢出错误:

==== JS stack trace =========================================

Security context: 0x15d948ca5879 <JSObject>
    0: builtin exit frame: stringify(this=0x15d948c890a9 <Object map = 0x15d932802ba1>,0x15d93d0022d1 <undefined>,0x15d93d0022d1 <undefined>,0x15d9bb6172e9 <Very long string[916483]>)

    1: arguments adaptor frame: 1->3
    2: /* anonymous */(aka /* anonymous */) [/Users/dragon/work/owl-changshachaonao/node_modules/webpack/lib/EvalSourceMapDevToolModuleTemplatePlugin.js:103] [bytecode=0x15d9f3...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

解决办法:

1、node v8.0以上版本支持在环境变量中设置最大内存:

export NODE_OPTIONS=--max_old_space_size=4096

如果是mac电脑,可在终端环境脚本中添加上面命令,然后重启终端:

vi .zshrc

export NODE_OPTIONS=--max_old_space_size=5120

# 或者运行命令立即生效:source .zshrc

2、安装increase-memory-limitnpm包,使用该包增加运行内存:

# 全局安装increase-memory-limit
npm install -g increase-memory-limit
# 进入工程目录,执行:
increase-memory-limit

注意:increase-memory-limit命令会操作node_modules里面对应文件,可能会导致git提交命令冲突,解决方法是删除node_modules文件夹,重新安装一个就好。

Window 系统如果运行npm start命令报错:

"'node --max-old-space-size=10240"' 不是内部或外部命令,也不是可运行的程序

在 \node_modules.bin 下的 *.cmd 文件中,在 ENDLOCAL 语句的上边一句,修改【“%_prog%”】 为 【%_prog%】,即去掉双引号。

4. npm install的时候使用特定的源安装

有的时候,使用npm config set registry https://registry.npm.taobao.org/设置一个源后,

有个别的npm包不是这个源里面的,如果在设置一下修改源,然后安装后,在改回来有点麻烦,可以在npm i的时候指定安装源,这样就不需要设置更换源了

使用方法:

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

--registry=后面放入npm包的源即可

5. npm安装指定版本、最新版本

安装指定版本:

npm install npm@6.8.0

安装最新版本:

npm install package_name
# 执行上面命令后会安装最新版本npm包,等同于
npm install package_name@latest

安装未来版本

npm install package_name@next

这个是beta版本,还未正式发布,所以会有风险

6. npm ERR! cb() never called! 解决

当运行npm install的时候,终端出现如下报错:

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR!     <https://npm.community>

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lenno/.npm/_logs/2021-04-04T08_14_08_150Z-debug.log

解决办法:

1、清除npm缓存:

sudo npm cache clean -f

一般来说已经解决问题了。

7. Unable to authenticate:认证失败

当运行npm install的时候,终端报错:

npm ERR! code E401
npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"

大致的意思是认证失败,之前使用 npm login登陆过,现在需要从新登陆。

解决办法:

1、如果记得账号密码,那么使用npm login命令然后重新输入账号密码即可

2、如果忘记密码了,那么可以找到.npmrc配置文件删除登陆信息:

.npmrc存放路径:

// windows电脑
C:\Users\user-name
// mac电脑
/Users/user-name

打开.npmrc文件后里面内容类似如下:

registry=https://registry.npm.taobao.org/
//registry.npm.taobao.org/:_authToken=NpmToken.7d2371ad-2e98-3d43-bd93-463f2d2cb2bb
loglevel=http
progress=false

把文件中的第二行内容删除(最终内容为如下):

registry=https://registry.npm.taobao.org/
loglevel=http
progress=false

保存后,在运行npm install就可以正常安装包了。

8. 查看项目中是否安装了特定包

终端进入到项目中,然后使用npm ls packageName命令来查看思否安装了某个包:

项目中没有安装包:

~ npm ls react

basic-common@0.1.0 /Users/user/work/certificate
└── (empty)

项目中安装了包:

~ npm ls eslint

basic-common@0.1.0 /Users/user/work/certificate
└── eslint@6.8.0

9. TypeError: compilation. templatesPlugin is not a function

在一个vue 前端项目中,当安装好依赖包,启动服务后,发现报如下错误:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

经过网上查找,发现是webpack版本问题,可以尝试如下几个方案

解决方案一:

 # 最新版本的 webpack 包
 npm add webpack@latest

解决方案二:

在方案一的基础上,删除node_modules文件夹后,重新安装依赖包npm install

解决方案三(实测解决了):

在方案一的基础上,安装html-webpack-plugin包

npm i --save-dev html-webpack-plugin

# 或者如下命令
npm i --save-dev html-webpack-plugin@next

10. npm install 报错:npm :this is an error with npm itself.

当使用npm i 命令安装依赖包的时候,报如下错误:

npm :this is an error with npm itself. Please report this error at: <https://github.com/npm/npm/issues>

解决方案:

# 清除npm缓存
npm cache clean --force

npm WARN using --force I sure hope you know what you are doing.

如果有package-lock.json文件,删除,然后从新npm install

经实测这个方案可以解决。

11. Error: Cannot find module ‘webpack’ 问题解决办法

当启动本地前端服务的时候,发现终端报如下错误:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

看报错是没有找到webpack模块,所以在项目中安装一下webpack:

npm install --save-dev webpack

npm WARN ttt No README data
npm WARN ttt No license field.

+ webpack@5.69.1
added 71 packages from 121 contributors in 9.761s

8 packages are looking for funding
  run `npm fund` for details

再次运行后就会解决问题,如果还不行,查看安装的webpack的版本:

npm info webpack

可尝试更换webpack版本:webpack@5.69.1 或者 webpack@4.22.0

安装上面的包后,如果报如下错误:

Syntax Error: Error: Cannot find module ‘cache-loader‘

解决方法:

进入项目目录,删除node_modules文件和package-lock.json文件,然后从新安装包npm install,然后重启项目就可以了。