一、显示npm install 详细信息
按照如下设置后,可以在npm install 后查看每一个步骤,方便查看安装的详细信息,对出现异常情况排查原因非常有用,比如,可以清楚的知道安装某个包时具体卡在什么环节等。
1、显示info级别信息
推荐设置这个级别就可以了
npm config set loglevel info
2、显示verbose级别信息
这个级别比info级别更详细
npm config set loglevel verbose
3、显示其他级别信息
https://docs.npmjs.com/misc/config#loglevel
二、查看项目某个库或所有库的版本号及依赖关系
1、查看某个库的版本号及依赖关系
npm ls 包名
// 查看 base64-js版本及依赖关系
npm ls base64-js
2、查看项目所有库版本及依赖关系
// 查看所有依赖的版本(当前项目)
npm ls
// 查看所有依赖的版本(全局 非当前项目)
npm ls -g
// 查看所有一级依赖的版本
npm ls --depth 0 或 npm ls --depth=0
// 查看所有一级依赖及二级依赖的版本
npm ls --depth=1 或 npm ls --depth 1
// 查看所有三级依赖及三级依赖的版本
npm ls --depth=3 或 npm ls --depth 3
3、查看项目dependencies或devDependencies所有库版本及依赖关系
// 查看所有dependencies一级依赖的版本
npm list -depth 0 -prod true
// 查看所有devDependencies一级依赖的版本
npm list -depth 0 -dev true
三、库版本解释
库版本解释 截图自: 2018 年了,你还是只会 npm install 吗?
四、锁定库版本
1、通过prefix控制(信息来源:npm-shrinkwrap锁定依赖)
当运行 npm update 时,
a、^1.5.1 【限制主版本号】允许安装版本号大于 1.5.1 但小于 2.0.0 版本的模块
npm默认采用这种方式b、~1.5.1 【限制次要版本】 允许安装版本号大于 1.5.1 但小于 1.6.0 版本的模块
可通过npm config set save-prefix="~"
将默认的^
修改为~
c、1.5.1 【精确控制】允许安装版本号大于 1.5.1
可通过npm config set save-exact true
将默认的^
取除掉
在此个人推荐采用~1.5.1的方式;
2、通过package-lock.json控制
npm 5.0+ 后 npm install时会自动创建package-lock.json文件;package-lock.json的出现,npm install规则发生了三次变化:(信息来源: npm install 生成的package-lock.json是什么文件?有什么用?)
a、 npm 5.0.x版本
不管package.json怎么变化,npm install 都会根据package-lock.json 文件下载;b、 npm 5.1.0+版本
npm install会无视package-lock.json, 根据package.json下载,也就是package.json的权限会高于package-lock.json;c、 npm 5.4.2+版本
npm install时 如果package.json与package-lock.json不一致,则根据package.json的语法规则进行下载;如果一致时,则都会根据package-lock.json下载;补充知识 : npx 是在npm 5.2.0+版本支持的 http://www.ruanyifeng.com/blog/2019/02/npx.html
3、通过shrinkwrap控制 (信息来源:npm-shrinkwrap锁定依赖)
步骤1、如果不能保证package.json文件定义的依赖与node_modules下已安装的依赖是匹配、无冗余的,建议执行 清理依赖并重新安装(
rm -rf node_modules && npm install
)或者精简依赖--移除无关的包(npm prune
)步骤2、
npm shrinkwrap
运行后,如果原来有package-lock.json文件的,将单纯的重命名为npm-shrinkwrap.json步骤3、
npm install
后,记得运行npm shrinkwrap
以便更新npm-shrinkwrap.json文件
也就是使用shrinkwrap控制库版本时需要执行三条命令;
package-lock.json与npm-shrinkwrap.json的作用类似,但是区别如下:
a、如果根目录下同时存在这两个文件,则以npm-shrinkwrap.json为准;
b、npm-shrinkwrap.json在npm v2、npm v3、npm v4 就已经支持了,但是package-lock.json 仅在npm v5+及以后才支持;
c、npm-shrinwkrap.json 可以被包含到发布包,而 package-lock.json 不行,保证用户可以自由管理依赖包;
4、弃用npm,采用yarn;
五、查看npm配置信息
1、查看简要信息 npm config list
2、查看所有信息 npm config list -l
六、清除npm包缓存
1、删除 node_modules及package-lock.json;
2、执行 npm cache clean --force
删除所有缓存 (其实清的是 ~/.npm/_cacache文件夹中的数据-https://github.com/sliwey/blog/issues/1),如果你本地有多个项目,不是很推荐这种做法(因为可能其他项目可能用到了这里面的缓存了) 推荐采用下面一点 七、某个项目不使用npm公共缓存
七、某个项目不使用npm公共缓存
1、先查看该项目的npm缓存目录在哪里
可以通过npm config get cache
查看当前npm的缓存在哪里;下图说明在npm公共缓存目录中
2、在该项目根目录下创建.npmrc文件,并在该文件中写入
cache=.npm
3、确认npm缓存目录在哪里,如下图这么显示说明成功了
参考:http://claude-ray.com/2019/12/06/npm-install-without-cache/
八、使用淘宝镜像
这个大家应该都知道,不解释了
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org 设置淘宝镜像
npm config set registry https://registry.npmjs.org/ 设置原始npm源
推荐安装使用nrm来管理源
九、npm 其他知识
1、升级npm
npm install npm@latest -g
2、使用npx 执行某个插件 (如果项目中没有,则安装最新的插件)
npx uglify-js -v
npx uglify-js -m -- test.js >>yasuo.js
npx webpack -v
npx node@10 -v npx node@12 -v 可以避免使用nvm之类的工具
3、npm install xx -g
后安装目录可以通过 npm root -g
查看。例如 Windows上的为 C:\Users\你的用户名\AppData\Roaming\npm\node_modules
4、查看npm包详细信息 npm view 包名
5、查看所有可以版本
npm view 包名 versions
6、查看当前项目可以的新版本
npm outdated
7、查看全局安装的npm包
npm list -g --depth 0
+-- @vue/cli@4.5.12
+-- browser-sync@2.26.13
+-- browserify@17.0.0
+-- cnpm@6.1.1
+-- conventional-changelog@3.1.24
+-- conventional-changelog-cli@2.1.1
+-- documentation@13.2.5
+-- f2elint@1.2.0
+-- gulp@4.0.2
+-- jsdoc@3.6.7
+-- lerna@4.0.0
+-- mp-cli-lc@3.0.1
+-- mrm@2.6.1
+-- nodemon@2.0.6
+-- nrm@1.2.1
+-- pm2@4.5.5
+-- rimraf@3.0.2
+-- rollup@2.53.1
+-- spy-debugger@3.8.6
+-- ts-node@10.0.0
+-- typescript@4.3.2
+-- verdaccio@4.12.0
+-- whistle@2.5.30
standard-version
8、如果安装的模块依赖了c++,则安装过程中会隐性安装node-gyp,node-gyp可以编译这些依赖c++模块的模块,但是node-gyp在首次编译时会依赖node源码,所以又会去悄悄去下载node,虽然安装时设置了淘宝镜像,但是此时是无效的,可以使用
disturl
来解决 npm config set disturl https://npm.taobao.org/mirrors/node/
9、node-sass安装时会从github上下载一个叫binding.node的文件,而github releases里的文件都托管在亚马逊的服务器上,导致国内无法访问,因此可以使用 sass_binary_site 来解决
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/
此外,node-sass版本与node版本相关联:
使用nvm或n 进行版本切换时,可能会出现binding.node匹配不到的情况,此时可通过
npm cache clean -f
npm rebuild node-sass 或 删除node_modules及package-lock.json 文件重新安装
类似node-sass从国外服务器下载东西还有很多 ,有时需要在Github上克隆一份该模块的源码进行分析,搜索包含base、binary、cdn、config、dist、download、host、mirror、npm、site、url等这样的关键词(自行探索,通常「mirror」的匹配度最高) https://mp.weixin.qq.com/s/u4oI_tdYDIFQeTPSifCt7g#
10、在项目中新增一个重装的指令
rimraf 是一个node版的 rm -rf
npm i -g rimraf
{
"scripts": {
"reinstall": "rimraf node_modules && rimraf package-lock.json && npm i"
}
}
11、依赖相同的包的安装机制
如:A和B包都依赖C,那么C会因npm版本的不同安装至不同的目录。如果npm版本为2及以下,则是
如果npm版本为3及以上,
若碰到依赖的版本不同会怎么样呢?
假设A、B 依赖D (v0.0.1),C依赖D(v0.0.2):
如果C的顺序在A,B的前面(npm intsall时 package.json 里依赖的顺序会依次解析)
推荐看这篇文章:https://www.zoo.team/article/npm-details
12、依赖类型的区别
- a、dependencies
生成环境及开发环境的依赖 - b、devDependencies
开发环境依赖 - c、optionalDependencies
可选的依赖包,(可有可无的依赖) - d、peerDependencies
同等依赖,必须先安装某些包,如ant-design@3.x的配置如下
"peerDependencies": {
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
},
- e、bundledDependencies
捆绑依赖包
13、需要修改某个npm包,但不想联系作者修改/发起pull request或者自己下载代码下来修改完后再发布npm
可以使用patch-package npm包,在安装完这个npm包后,在package.json中的script添加"postinstall": "patch-package"
,然后修改你想要修改的npm包源码文件(在项目根目录node_modules文件夹里),然后执行npx patch-package 你想要修改的npm包名称
,即可。详细步骤请见:使用patch-package定制node_modules 中的依赖包
十、推荐资料
1、[译]npm入门指南
2、npm-shrinkwrap锁定依赖
3、在JavaScript项目中锁定npm依赖包版本
4、 npm 官方文档 https://docs.npmjs.com/cli/v6/commands/npm-ls
5、 中文文档 https://www.npmjs.cn/getting-started/what-is-npm/
6、npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
7、手把手教你快速制作基于Element UI组件npm包 https://www.jianshu.com/p/b375e1eb549b
十一、 npm与yarn、pnpm及相关
(一) 由facebook及google支持的yarn
1、查看包引入
有时npm嵌套的太深,我们不知道某个包是怎么引进来的,这时我们可以使用 yarn why <package-name>
来查看它是谁引入的
(二) 由Zoltan Kochan 开发的pnpm
1、为什么现在我更推荐 pnpm 而不是 npm/yarn?
2、Zoltan Kochan--Why should we use pnpm?
(三) node 内置的npm
Node.js 16.9.0 开始内置Corepack,其将默认支持pnpm、yarn包管理器
十二、 推荐网站
1、查看某个npm包被哪个npm包作为依赖引用了,例如handlebars包:
https://cnpmjs.org/package/handlebars
2、分析某个npm https://npm.devtool.tech/
例如查看cdn: https://npm.devtool.tech/cdn/handlebars
3、在线运行npm
https://npm.runkit.com/js-utils-lc
4、查看npm包的源文件
a. https://cdn.jsdelivr.net/npm/js-utils-lc/
b. https://www.jsdelivr.com/package/npm/js-utils-lc
c. https://npm.runkit.com/js-utils-lc
5、查看npm包下载量及对应的github等信息
a. https://openbase.com/js/js-utils-lc
b. https://snyk.io/advisor/npm-package/js-utils-lc
6、 引用最新的cdn
https://unpkg.com/js-utils-lc@latest/
十三、nvm注意事项
1 设置默认版本 nvm alias default v8.9.1
2 查看nvm安装的目录echo $NVM_DIR
十四、gulp v3.9 与Node12不兼容解决方案
使用Node 12 运行gulp 3.9时会报primordials is not defined
错误,可以在package.json加入如下代码解决(https://stackoverflow.com/questions/55921442/how-to-fix-referenceerror-primordials-is-not-defined-in-node-js)
{
"scripts": {
"preinstall": "npx npm-force-resolutions"
},
"resolutions": {
"graceful-fs": "^4.2.10"
}
}
以上亲测有效。(原理是npm-force-resolutions 可以控制依赖的依赖,有点类似yarn的 selective dependency
)
或者(以下方法待验证:https://blog.csdn.net/qq_22713201/article/details/122329418)
1、项目根目录新建npm-shrinkwrap.json
2、npm-shrinkwrap.json内容修改如下:
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
十五、专门分析npm大小的网站
十六、npm下载量对比分析
https://npmtrends.com
例如:/angular-vs-react-vs-vue