你不一定知道的npm那些知识

一、显示npm install 详细信息

按照如下设置后,可以在npm install 后查看每一个步骤,方便查看安装的详细信息,对出现异常情况排查原因非常有用,比如,可以清楚的知道安装某个包时具体卡在什么环节等。

1、显示info级别信息

推荐设置这个级别就可以了
npm config set loglevel info


image.png

2、显示verbose级别信息

这个级别比info级别更详细
npm config set loglevel verbose

image.png

3、显示其他级别信息

https://docs.npmjs.com/misc/config#loglevel

image.png

二、查看项目某个库或所有库的版本号及依赖关系

1、查看某个库的版本号及依赖关系
npm ls 包名

//  查看 base64-js版本及依赖关系
npm ls base64-js
image.png

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
image.png

3、查看项目dependencies或devDependencies所有库版本及依赖关系

// 查看所有dependencies一级依赖的版本
npm list -depth 0 -prod true
// 查看所有devDependencies一级依赖的版本
npm list -depth 0 -dev true

三、库版本解释

image.png

库版本解释 截图自: 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

image.png

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公共缓存目录中

image.png

2、在该项目根目录下创建.npmrc文件,并在该文件中写入

cache=.npm

3、确认npm缓存目录在哪里,如下图这么显示说明成功了

image.png

参考: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 包名

image.png

5、查看所有可以版本
npm view 包名 versions
image.png

6、查看当前项目可以的新版本npm outdated
image.png

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

image.png

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版本相关联:


image.png

使用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及以下,则是


image.png

如果npm版本为3及以上,
image.png

若碰到依赖的版本不同会怎么样呢?
假设A、B 依赖D (v0.0.1),C依赖D(v0.0.2):
image.png

如果C的顺序在A,B的前面(npm intsall时 package.json 里依赖的顺序会依次解析)


image.png

推荐看这篇文章: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

image.png

2、分析某个npm https://npm.devtool.tech/
例如查看cdn: https://npm.devtool.tech/cdn/handlebars

image.png

3、在线运行npm
https://npm.runkit.com/js-utils-lc

image.png

4、查看npm包的源文件
a. https://cdn.jsdelivr.net/npm/js-utils-lc/

image.png

b. https://www.jsdelivr.com/package/npm/js-utils-lc

image.png

c. https://npm.runkit.com/js-utils-lc

image.png

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大小的网站

https://bundlejs.com/

十六、npm下载量对比分析

https://npmtrends.com
例如:/angular-vs-react-vs-vue

image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266