npm使用过程中的一些错误解决办法及npm常用命令和技巧

时间:2022-06-11 17:26:03

 node,npm在前端开发流程中提供了非常完善的自动化工具链,但是同样由于其复杂性导致有很多奇奇怪怪的问题。本文将记录使用过程中出现的一些问题及其解决方法备案。

  • 国内由于gfw问题,导致很多国外的网站不能访问,比如bitbucket就是一个host代码的很优秀平台,但是由于该平台可能被block住,从而导致npm安装时出现奇奇怪怪的问题。有以下方法解决:
1.使用一个proxy来代理访问,但是这个方法速度可能比较慢;
2.可以通过修改npm的配置文件让npm到另外的pacakge mirror站点去找package,通过如下命令
$
npm config set registry https://registry.npm.taobao.org
$ npm config set registry http://r.cnpmjs.org
或者:npm config set registry http://registry.npmjs.eu
随后再执行
npm install
或者直接在命令行中指定某些参数,比如phantomjs是一个无图形界面的浏览器,在自动化测试中应用广泛,可能的安装方式:
npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads
如果上述方法都不奏效,那么可能需要 配置自己网卡的dns为国外的dns
  • 如果你在企业防火墙的后面,上网是通过企业的代理来上的,或者需要使用代理加速npm安装过程,那么需要配置proxy和https-proxy
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
// 或者簡單粗暴地简化为在git-bash界面中设置(包括支持*本地代理):
export {http,https,ftp}_proxy=‘http://192.168.0.11:1080'
  • 在linux下面,你可能需要使用-g参数安装一些package作为global,比如grunt,gulp,bower等,但是你又没有root权限,就有可能出现下面的错误:
$ npm install -g gulp
npm ERR! tar.unpack untar error /home/cabox/.npm/gulp/3.9./package.tgz
npm ERR! Linux 2.6.-042stab104.
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "gulp"
npm ERR! node v0.12.3
npm ERR! npm v2.9.1
npm ERR! path /usr/local/lib/node_modules/gulp
npm ERR! code EACCES
npm ERR! errno - npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/gulp'
npm ERR! at Error (native)
npm ERR! { [Error: EACCES, mkdir '/usr/local/lib/node_modules/gulp']
npm ERR! errno: -,
npm ERR! code: 'EACCES',
npm ERR! path: '/usr/local/lib/node_modules/gulp',
npm ERR! fstream_type: 'Directory',
npm ERR! fstream_path: '/usr/local/lib/node_modules/gulp',
npm ERR! fstream_class: 'DirWriter',
npm ERR! fstream_stack:
npm ERR! [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23',
npm ERR! '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53',
npm ERR! 'FSReqWrap.oncomplete (fs.js:95:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator. npm ERR! Please include the following file with any support request:
npm ERR! /home/cabox/npm-debug.log

可能的解决方案是修改npm将安装的目标目录的ownershipi:

$ npm config get prefix
/usr/local
$ whoami
cabox

上面的命令可以查到你是以cabox用户来运行命令的,npm将全局package安装package到/usr/local下面的lib/node_modules目录下面,比如gulp,bower,grunt等需要全局安装的node module都将存放到这里,而如果你对该目录没有写的权限,则会出现问题,因此你可以做的是chown -R /usr/local your_username

但是这个方案也是有缺点的,特别是当一个系统中有多个用户使用时,你把这些公共目录都搞成你自己的ownership,可能会存在问题。

另外一种可能的解决方案修改上述prefix,指定npm的全局package安装目录为自己的Home目录下面的子目录,同时需要将上述子目录放到path中去,这样就能够将npm的全局package安装到这个我们有权限控制的目录中了

$ npm config set prefix /home/cabox/npm-global/
$ npm config get prefix
/home/cabox/npm-global
$ gulp
-bash: gulp: command not found
$ npm install -g gulp
/home/cabox/npm-global/bin/gulp -> /home/cabox/npm-global/lib/node_modules/gulp/bin/gulp.js
gulp@3.9. /home/cabox/npm-global/lib/node_modules/gulp
├── pretty-hrtime@1.0.
├── interpret@0.6.
├── deprecated@0.0.
├── archy@1.0.
├── minimist@1.1.
├── tildify@1.0. (user-home@1.1.)
├── v8flags@2.0. (user-home@1.1.)
├── chalk@1.0. (escape-string-regexp@1.0., ansi-styles@2.0., supports-color@1.3., strip-ansi@2.0., has-ansi@1.0.)
├── semver@4.3.
├── orchestrator@0.3. (stream-consume@0.1., sequencify@0.0., end-of-stream@0.1.)
├── liftoff@2.1. (extend@2.0., rechoir@0.6., flagged-respawn@0.3., resolve@1.1., findup-sync@0.2.)
├── gulp-util@3.0. (array-differ@1.0., array-uniq@1.0., lodash._reescape@3.0., lodash._reevaluate@3.0., beeper@1.1., lodash._reinterpolate@3.0., object-assign@2.1.
, replace-ext@0.0., vinyl@0.4., lodash.template@3.6., through2@0.6., multipipe@0.1., dateformat@1.0.)
└── vinyl-fs@0.3. (graceful-fs@3.0., strip-bom@1.0., defaults@1.0., vinyl@0.4., mkdirp@0.5., through2@0.6., glob-stream@3.1., glob-watcher@0.0.)

上面使用cabox用户安装gulp到/home/cabox/npm-global目录中去了。

详细参照下面的两篇文章:

http://www.johnpapa.net/how-to-use-npm-global-without-sudo-on-osx/

https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md

但是现在还有一个问题,那就是系统path中并没有包含该目录,因此直接运行gulp还是无法找到的

在.bash_profile中添加以下:

PATH=$PATH:$HOME/bin:$HOME/npm-global/bin                                                                                                                                  
  • npm config ls 将列出所有已经配置好的npm选项 
  • 如果遇到一些莫名其妙的问题,你首先可以更新一下npm版本,删除npm的cache
    npm install -g npm@latest或npm install npm -g
    npm cache clear && rm -rf node_modules && npm install
  • npm ls 和 npm uninstal删除已安装的package. npm ls packagewitherror将列出有问题的那个package安装在哪里,这样你就可以直接到那个目录重新单独安装那个pacakge,调查不能安装成功的原因
    [cabox@box-codeanywhere npmtest]$ npm install --save lodash
    npm WARN package.json kidsit@1.0. No repository field.
    npm WARN package.json kidsit@1.0. No README data
    lodash@3.9. node_modules/lodash
    [cabox@box-codeanywhere npmtest]$ ls
    node_modules package.json
    [cabox@box-codeanywhere npmtest]$ vi package.json
    [cabox@box-codeanywhere npmtest]$ ls
    node_modules package.json
    [cabox@box-codeanywhere npmtest]$ npm ls
    kidsit@1.0. /home/cabox/workspace/npmtest
    └── lodash@3.9.
    [cabox@box-codeanywhere npmtest]$ npm uninstall lodash --save
    unbuild lodash@3.9.
    在这里如果node系统的模块安装有问题,这里会主动列出来:

    ├── camelcase@1.1.0
    ├─┬ cliui@2.1.0
    │ ├─┬ center-align@0.1.1
    │ │ └─┬ align-text@0.1.1
    │ │ ├── kind-of@1.1.0
    │ │ ├── longest@1.0.1
    │ │ └── repeat-string@1.5.2
    │ ├─┬ right-align@0.1.1
    │ │ └─┬ align-text@0.1.1
    │ │ ├── kind-of@1.1.0
    │ │ ├── longest@1.0.1
    │ │ └── repeat-string@1.5.2
    │ └── wordwrap@0.0.2
    ├── decamelize@1.0.0
    └── window-size@0.1.0

    npm ERR! missing: bytes@1.0.0, required by body-parser@1.12.4
    npm ERR! missing: content-type@~1.0.1, required by body-parser@1.12.4
    npm ERR! missing: depd@~1.0.1, required by body-parser@1.12.4
    npm ERR! missing: iconv-lite@0.4.8, required by body-parser@1.12.4
    npm ERR! missing: on-finished@~2.2.1, required by body-parser@1.12.4
    npm ERR! missing: qs@2.4.2, required by body-parser@1.12.4
    npm ERR! missing: raw-body@~2.0.1, required by body-parser@1.12.4
    npm ERR! missing: type-is@~1.6.2, required by body-parser@1.12.4

  • 如果你的node_modules目录中已经安装了一个package,但是package.json中并没有对该package做依赖,那么这个package就应该被删除。这时如果执行npm ls命令则指示有一个package not used。为了清理代码,你需要执行npm prune
    [cabox@box-codeanywhere npmtest]$ npm install lodash
    npm WARN package.json kidsit@1.0. No repository field.
    npm WARN package.json kidsit@1.0. No README data
    lodash@3.9. node_modules/lodash
    [cabox@box-codeanywhere npmtest]$ ls node_modules/
    lodash
    [cabox@box-codeanywhere npmtest]$ npm ls
    kidsit@1.0. /home/cabox/workspace/npmtest
    └── lodash@3.9. extraneous npm ERR! extraneous: lodash@3.9. /home/cabox/workspace/npmtest/node_modules/lodash
    [cabox@box-codeanywhere npmtest]$ npm prune
    npm WARN package.json kidsit@1.0. No repository field.
    npm WARN package.json kidsit@1.0. No README data
    unbuild lodash@3.9.
    [cabox@box-codeanywhere npmtest]$ npm ls
    kidsit@1.0. /home/cabox/workspace/npmtest
    └── (empty)
  • npm ls -g --depth=0可以列出已经安装的全局package
    [cabox@box-codeanywhere npmtest]$ npm ls -g --depth=
    /home/cabox/npm-global/lib
    ├── gulp@3.9.
    └── npm@2.11. [cabox@box-codeanywhere npmtest]$ npm uninstall -g gulp
    unbuild gulp@3.9.
    [cabox@box-codeanywhere npmtest]$ npm ls -g --depth=
    /home/cabox/npm-global/lib
    └── npm@2.11.
  • 为了publish一个package,你需要有以下流程: npm init创建一个package.json,创建入口js,比如index.js,exports相应接口,随后npm adduser, npm publish就可以了。如果要更新你的package,注意需要将版本号做一下变更(npm version patch,npm version minor, npm version major或者手动修改本package的package.json文件的版本号!),publish完成后,你可以在https://www.npmjs.com/~kidsit网页上查看是否确实publish了一个package。注意:npm package遵循semantic versioning method, major.minor.patch/patch表示bugfix,minor:表示new feature,major表示api无法保持兼容
    [cabox@box-codeanywhere npmtest]$ npm adduser
    Username: kidsit
    Password:
    Email: (this IS public) @qq.com
    [cabox@box-codeanywhere npmtest]$ npm config ls
    ; cli configs
    user-agent = "npm/2.11.1 node/v0.10.28 linux x64" ; userconfig /home/cabox/.npmrc
    prefix = "/home/cabox/npm-global" ; node bin location = /usr/bin/node
    ; cwd = /home/cabox/workspace/npmtest
    ; HOME = /home/cabox
    ; 'npm config ls -l' to show all defaults. [cabox@box-codeanywhere npmtest]$ npm publish
    + kidsit@0.0.
    [cabox@box-codeanywhere npmtest]$
  • http://blog.izs.me/post/1675072029/10-cool-things-you-probably-didnt-realize-npm

  • npm一般在哪些目录搜索需要require的模块呢?
    var utils = require( "utils" );
    上面的require命令将导致node按照以下顺序查找文件,注意不一定是index.js,这个由package.json中的main定义决定的
    ./node_modules/utils.js
    ./node_modules/utils/index.js
    ./node_modules/utils/package.json

    具体参考http://www.bennadel.com/blog/2169-where-does-node-js-and-require-look-for-modules.htm

  • 在windows host中的vagrant box linux中使用npm install时,由于host os不支持linux的symbol link,所以必须使用:npm install --no-bin-links命令,否则会出现
    info unbuild /home/nicholas/share/node_modules/yuitest
    verbose link symlinking /usr/local/lib/node_modules/yuitest to /home/nicholas/share/node_modules/yuitest
    ERR! Error: EPROTO, Protocol error '/usr/local/lib/node_modules/yuitest'
  • 在执行npm install时如果出现大量的EPERM错误时,很有可能是反病毒软件惹的祸!,同时有可能是npm cache clear没有执行,参考:http://blogs.msdn.com/b/matt-harrington/archive/2012/02/23/how-to-fix-node-js-npm-permission-problems.aspx
    Error: EPERM, operation not permitted 'C:\...\noam\node_modules\phantomjs\tmp\phantomjs-1.7.0-windows'
    at Object.fs.renameSync (fs.js::)
  • gulp 是一个task runner,它和grunt的功能差不多,但是却比grant要快很多,它基于stream,pipe
  • 在win7,win10下安装npm install时,很有可能出现 error MSB3411: Could not load the Visual C++ component "VCBuild.exe". ...  的错误,一个可行的方案是:
npm config set msvs_version 2012 --global  

如何列出一个特定模块的依赖关系?

有时我们希望看清楚一个模块到底是因为谁被安装进来的,也就是说它是哪个package的依赖,你可以使用npm ll命令:

比如下面的命令npm -- gulp-less命令你就可以看出,原来gulp-less这个模块在laravel-elixir模块中包含而安装的,也就是说laravel-elixir已经包含了less预处理功能!

$ npm ll gulp-less
laravel-elixir@5.0.
│ C:\Users\Administrator\devenvironment\Code\newkidsitfromscratch\node_modules\laravel-elixir
│ Laravel Elixir Core
│ git+https://github.com/laravel/elixir.git
│ https://github.com/laravel/elixir
└── gulp-less@3.1.
Less for Gulp
git://github.com/plus3network/gulp-less.git
https://github.com/plus3network/gulp-less#readme

npm view gulp-less查看gup-less这个模块的meta信息

https://github.com/substack/stream-handbook

  • npm 命令大全参考: http://browsenpm.org/help
  • npm peerDependency问题:一个可行的思路是:首先升级npm3,然后再分析版本的依赖关系!
  • npm install安装时可能会涉及到phantomjs-2.1.1-windows.zip无法安装导致失败的问题,解决办法:手动下载phantomjs-1.9.7-windows.zip,复制到C:\Users\ADMINI~1\AppData\Local\Temp\phantomjs\目录,再次执行npm install mocha-phantomjs,安装成功 http://download.csdn.net/detail/f907279313/9575566
  • windows下如何平滑升级npm3?

参考这篇 https://github.com/felixrieseberg/npm-windows-upgrade 文章,写的非常详细,强烈建议升级到npm3,一些怪异的npm模块安装问题都会没有了!

windows下面的node-pre-gyp安裝依賴問題

 fsevents: AttributeError: 'MSVSProject' object has no attribute 'iteritems'

上述錯誤的原因是windows机器上没有安装build tooling依赖,解决办法是:

npm install --global --production windows-build-tools

参考: https://github.com/nodejs/node-gyp

我们如何向npm run script传入参数?

version=1 npm run build -- homepage

上面我们的build脚本就可以得到version和homepage这个参数

https://jurosh.com/blog/npm-pass-parameters-into-script

Nodejs的代码如何console.log查看object的值?

https://github.com/Silviu-Marian/node-codein

npm使用过程中的一些错误解决办法及npm常用命令和技巧

npm install -g和local有什么区别?

通常,如果使用-g参数则安装的nodejs module保存在{prefix}/lib/node_modules 目录中,对应的可执行文件在{prefix}/bin中, {prefix}/share/man中则保存帮助文件信息

如果不使用-g参数,则直接安装在./node_modules目录下,而executable则保存在./node_modules/.bin/文件夹下

那么什么时候应该用-g参数,什么时候不用-g参数呢?

1. 如果你安装的node module希望通过 require('modulename')来在你的程序中应用,那么就应该安装在local

2.如果你希望安装一个可以在全局使用的命令行工具,这时就要用-g参数,因为安装的binary文件将在PATH环境变量中可以找到

很多时候,你可能两者都会需要,比如webpack, gulp既有cli,又有lib代码需要在dev环境中使用,这时local和-g都安装一下

npm shrinkwrap固化你的module dependency

我们在安装完成我们的npm模块后,会根据当时的各软件模版版本情况下载合适的版本到本地,而我们知道开源软件版本变化会很快,你今天安装调试ok,明天很有可能就有新的依赖的版本发布,而这时你如果再次执行npm install就有可能下载了不同版本的依赖,很有可能会产生问题!怎么办?一个可行的方案是一旦调试完毕,你使用npm shrinkwrap的命令将你的依赖版本固化下来,这样下次执行npm install时就依然能够得到相同的版本。

如何单独修改dependency of dependency特定版本安装?

1.到你已经安装的dependency目录下执行npm uninstall xxdependency

2.修改你希望的xxdependency版本

3.执行npm install yourmodule

有时npm run xx时出现 code ELIFECYCLE问题

npm ERR! code ELIFECYCLE

可能的原因就是你可能有其他窗口也开了对应的命令

如何指定npm require的路径起始点别名?

https://*.com/questions/27502608/resolving-require-paths-with-webpack

npm包管理可能的代替方案yarn

yarn是一个能够替代npm的node包管理替代方案,支持包cache,离线下载(从cache),扁平化目录等有用的功能,速度快,也很稳定。

但是和npm一样存在网速奇慢的问题,我们同样可以通过以下命令来使用淘宝镜像。

这里再次点赞马云同学,作为中国互联网先进的公司,有造福中国开发者的担当和行动!鄙视baidu和腾讯,一个是无良商业公司,百度一下你就上当。另一个是游戏发家,毒害孩子心灵,但是他们俩个却没有为中国开发者造福,没有为中国互联网的进步做出什么应该有的贡献

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

https://yarnpkg.com/zh-Hans/docs/usage

windows文件名过长问题如何解决?

https://support.microsoft.com/zh-cn/help/320081/you-cannot-delete-a-file-or-a-folder-on-an-ntfs-file-system-volume

如何通过npm run xx给xx传入参数?

在webpack的build中,我们往往借助npm run script来调用对应的构建方法,这时我们可能希望传入自己的参数,怎么办呢?

npm run <command> [-- <args>]
npm run build -- one two=three four
// 等同于
node build.js one two=three four
// 这时传入的所有参数都在process.argv中,其值如下,可以在build.js中访问
0: node
1: build.js
2: one
3: two=three
4: four

如何安装一个特定module的特定版本?

$ npm info bootstrap versions

[ '0.0.1',
'0.0.2',
'3.1.1',
'3.2.0',
'3.3.0',
'3.3.1',
'3.3.2',
'3.3.4',
'3.3.5',
'3.3.6',
'3.3.7',
'4.0.0-alpha.2',
'4.0.0-alpha.3',
'4.0.0-alpha.4',
'4.0.0-alpha.5',
'4.0.0-alpha.6',
'4.0.0-beta',
'4.0.0-beta.2',
'4.0.0-beta.3',
'4.0.0' ]
$ npm install --save bootstrap@3.3.7
√ All packages installed ( packages installed from npm registry, use 2s, speed .93kB/s, json (.48kB), tarball .8kB)

如何使用npm update特定的一个package而不是整个都更新

有些时候,我们好不容易把npm的环境梳理清楚了,但是package.json中定义的某个软件模块又有了新的版本,这时我们可能需要单个模块去做update。因为一旦全部更新,很有可能会有这个那个问题,我们不希望被这些恼人的事情去打扰,这时你可能希望只对某个模块更新。如何做呢?

1. 修改package.json中模块xxxx的版本指示;

2. npm update xxxx

当然,我们也可以通过npm outdated列出有哪些模块需要做更新。

https://www.hostingadvice.com/how-to/update-npm-packages/

npm install -f解决一些难以解决的安装问题EPERM

npm ERR! path C:\Users\Administrator\devenvironment\Code\newkidsitfromscratch\resources\assets\js\vuecliwebpackv296_all\node_modules\fsevents\node_modules
npm ERR! code EPERM
npm ERR! errno -
npm ERR! syscall scandir

EPERM问题的可能原因h

当出现类似以下的EPERM无法rename的错误时,你可以检查一下是否对应的软件确实存在,如果已经不存在了,那么很有可能是因为在package.json中还有该模块对应的记录,而npm在安装之前应该会删除对应的模块,这时发现根本就没有该模块了,则报错!解决方案也很简单,直接将vue-focus在package.json中删除就好了!

npm ERR! path D:\devenv\code\myproject\resources\assets\js\vueapp\node_modules\vue-focus
npm ERR! code EPERM
npm ERR! errno -
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'D:\devenv\code\myproject\resources\assets\js\vueapp\node_modules\vue-focus' -> 'D:\devenv\code\myproject\resources\assets\js\vueapp\node_modules\.vue-focus.DELETE'
npm ERR! { [Error: EPERM: operation not permitted, rename 'D:\devenv\code\myproject\resources\assets\js\vueapp\node_modules\vue-focus' -> 'D:\devenv\code\myproject\resources\assets\js\vueapp\node_modules\.vue-focus.DELETE']