npm、yarn、cnpm、pnpm 使用操作都在這了

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信?ruochuan12

有時候想查個命令，或者換個鏡像找了幾篇文章才找到，最近閑著沒事干，干脆整理一篇文檔，以后就不用在網上瞎搜有的還寫不全。

Usage

全局安裝

//?安裝node自帶npm，檢查是否安裝成功，執行如下命令
npm?-v??//?6.14.15//?yarn
npm?install?-g?yarn//?cnpm?
npm?install?-g?cnpm//?pnpm
npm?install?-g?pnpm

初始化一個項目

npm?init
//?OR
yarn?init//?快速生成的package.json默認配置
npm/yarn?init?-y

安裝項目依賴

//?npm?/?cnpm?/?pnpm
//?簡寫，全稱?npm?install
npm?i?[package]//?yarn
yarn?add?[package]//?安裝指定版本
npm?i?[package]@[version]
yarn?add?[package]@[version]//?小栗子
//?安裝?jquery
npm?i?jquery@3.0.0//?查看package.json?
"jquery":?"^3.0.0"

Tips1 意外情況

我們經常會在安裝一半退出在繼續安裝會報錯，這是因為有緩存的原因。

npm?cache?clean?--force

Tips2 --save--dev意思

npm?install?vue
npm?install?vue?--save
npm?install?@babel/core?--save-dev空
查看package.json，文件內容不發生改變，在運行項目且有引用該依賴時能正常運行，當npm i時候，不會安裝該依賴。--save
查看package.json 會有一個dependencies對象，里面就是項目運行需要的依賴。
dependencies?代表項目運行所依賴的模塊
簡寫?-S
npm?install?express?-S--save-dev
查看package.json 會有一個devDependencies對象，里面就是項目開發時候需要的依賴。
devDependencies?代表項目開發所需要的模塊
如：babel 是發布時，將 ES6 代碼編譯成 ES5 ，那么 babel 就是devDependencies。
簡寫?-D
npm?install?express?-D

Tips3 ^和~的區別

//?package.json中^和~的區別"vue":?"~2.6.0",
"es6-promise":?"^2.0.0"~符號
假設vue版本已經更新到2.7.0以上，當我們重新安裝項目依賴，只會匹配到2.6.x的最新版本，不會匹配到2.7.0及以上^符號
假設es6-promise更新3.0.0，當我們重新安裝項目依賴，es6-promise始終是2.0.0

Tips4 版本號代表含義

"vue":?"2.6.0"第一位表示：主版本號，常用于大版本更新，可能不兼容舊版本。
如Vue2.0和Vue3.0,雖然說向下兼容，但是部分語法存在兼容問題。第二位表示：次版本號，增加了新的功能，基本向下兼容。第三位表示：補丁號，?修復了bug等。

全局包管理

//?查看當前哪些包需要更新
npm?outdated?-g?--depth=0@vue/cli????4.5.9???4.5.13??4.5.13??global
npm???????6.14.15??6.14.15??7.24.0??global
pnpm???????5.17.3??5.18.10??6.15.1??global//?更新全局的依賴包
npm?update?-g//?更新依賴包
npm?update?pnpm//?可能報錯?Remove?the?existing?file?and?try?again,?or?run?npm?with?--force?to?overwrite?files?recklessly.1.?卸載?pnpm
npm?uninstall?-g?pnpm清理?npm?緩存
npm?cache?clean?--force重新安裝
npm?i?pnpm?-g//?第二種?強制安裝依賴
npm?install?-g?pnpm?--force

升級依賴包

"vue":?"^2.6.0"npm?update?vueyarn?upgrade?vue@2.6.14?指定版本
yarn?upgrade?vue@^?//選擇指定版本//?"vue":?"^2.6.14"

刪除依賴包

"vue":?"^2.6.0"npm?uninstall?vueyarn?remove?vue

更新項目中所有依賴項

npm-check
npm-check-updates

二者目的相同，只是在更新過程中的一些交互展示形式存在一定的差異

npm-check-updates

安裝

npm?install?-g?npm-check-updates

使用

//?查看可更新包
ncu[====================]?12/12?100%@vssue/api-github-v4?????????????????????????^1.4.0??→???^1.4.7?????@vssue/vuepress-plugin-vssue?????????????????^1.4.6??→???^1.4.8?????@vuepress-reco/vuepress-plugin-back-to-top???^1.5.7??→???^1.6.0?????@vuepress/plugin-google-analytics????????????^1.8.1??→???^1.8.2?????@vuepress/plugin-pwa?????????????????????????^1.8.1??→???^1.8.2?????dayjs???????????????????????????????????????^1.10.4??→??^1.10.7?????vuepress?????????????????????????????????????^1.8.1??→???^1.8.2?????vuepress-plugin-live2d-model?????????????????^1.0.0??→???^1.0.7?????vuepress-plugin-one-click-copy???????????????^1.0.2??→???^1.0.6?//?升級所有依賴項ncu?-uncu?-u?vuepress?dayjs?...

npm-check

安裝

npm?install?npm-check?-g

使用

//?查看可更新包
npm-check//?升級所有依賴項
npm-check?-u

切換國內鏡像

目前常用的鏡像列表

npm?----?https://registry.npmjs.org/cnpm?---?https://registry.nlark.com/taobao?-?https://registry.npm.taobao.orgyarn?---?https://registry.yarnpkg.com/tencent-?https://mirrors.cloud.tencent.com/npm/

查看yarn當前鏡像源

yarn?config?get?registrynpm?config?get?registrycnpm?config?get?registrypnpm?config?get?registry//https://registry.nlark.com/

設置鏡像源

//?全局使用
yarn?config?set?registry?https://registry.npm.taobao.orgcnpm?config?set?registry?https://registry.nlark.com/
//?...//?臨時在項目中使用
npm?install?--registry?https://registry.npm.taobao.org

還原鏡像源

npm?config?set?registry?https://registry.npmjs.org
//?根據上面的鏡像列表替換就行。

nrm / yrm 管理鏡像源工具

yrm/nrm 不僅可以快速切換鏡像源，還可以測試自己網絡訪問不同源的速度，且yrm/nrm用法都相同。

安裝 yrm /nrm

npm?install?-g?yrm
//?or
npm?install?-g?nrm

列出當前鏡像源列表

yrm?lsnpm?-----??https://registry.npmjs.org/
cnpm?----??http://r.cnpmjs.org/
taobao?--??https://registry.npm.taobao.org/
nj?------??https://registry.nodejitsu.com/
rednpm?--?http://registry.mirror.cqupt.edu.cn
skimdb?--?https://skimdb.npmjs.com/registry
yarn?----??https://registry.yarnpkg.com

使用，測試

yrm?use?taobao
//?https://registry.npm.taobao.org/yrm?test?taobao
//?taobao?-?187ms

建議

Windows用戶

推薦使用yarn/npm，可能cnpm/pnpm安裝速度優于yarn/npm，但是可能造成詭異的 bug，比如項目運行不起來等等，最簡單直接的方法就是刪除node_modules重新安裝。

如圖所示，圖中的項目通過pnpm/cnpm安裝的依賴項，直接運行不起來，之所以只針對Win系統，因為Win系統刪除node_modules快則幾分鐘，慢則十幾分鐘，而mac直接秒刪，試錯成本低可以嘗試。

Q: 項目通過cnpm/pnpm 安裝依賴怎么知道會不會有詭異的 bug。

A: 項目如果能運行起來，99%不會有詭異的 bug，萬一調試中報錯，寫的代碼有沒有問題，可以查看報錯日志自行查看一下相關教程。

參考文獻

https://blog.csdn.net/xuaner8786/article/details/81630445
https://juejin.cn/post/6844904114762022926
https://www.npmjs.com/package/npm-check-updates
https://juejin.cn/post/6913833065647341581
https://github.com/dylang/npm-check

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進群。