都2022 年了,你总不能还只会 npm i 吧?

大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。

都2022 年了,你总不能还只会 npm i 吧?

在键帽与字符上横跳,于代码和程序中穿梭。一起面向快乐编程!

这次给大家带来一篇 npm 命令相关的文章。目的在于查缺补漏,提升效率。

npm 作为 node 包管理器,内置了非常多的命令供我们日常开发使用,记住以下列出的命令将会给日常开发带来非常大的便利性。

好了,话不多说,看代码 👇

给喜欢的包加星(类似 github 的 star)

其实我把加星就当作是收藏的操作,其实在 npm 中它就是收藏的作用,因为在官网中,我们并不能像 github 一样清楚的看到这个仓库有多少颗 star。

npm star [package-name]

取消收藏

npm unstar [package-name]

0bd8391a0ef2bae10bbe37ca046a7e4d.png查看收藏列表

npm stars
1eead06c559acabc329974de32653490.png

这些操作都会报错在你的账号下,所以很方便。不用担心本机操作后其他地方看不到。你只需要有一个 npm 账户就可以了,还没有的话,可以看本文第二节 👇 ,注册一个并登录吧。

登录 npm

首先你要有一个 npm 的账号,没有的在👉npm 官网[1]注册一个就行了。

注意:在官网注册的账号,登陆时使用淘宝源会报错,要改回默认源

推荐使用 nrm 或者 yrm 来快速切换镜像源,个人推荐使用 yrm,为什么呢?看下图

307a9a1e8c9659fe0367ac7799d84541.png
nrm

yrm 会同时将你的 npm 和 yarn 一起切换,并且 ls 后会有*号标注当前正在使用的源,记得 nrm 以前也有的,现在不知道怎么了...

46f441587f8afdc3ac5e7b83908ad48a.png
yrm

当然你可以手动 npm 切换为默认源

npm config set registry https://registry.npmjs.org

然后执行命令npm login,依次填写用户名、密码、邮箱即可。如果你在 npmjs 站点还设置了其他保护,就还需要输入一些验证码之类的等等...

0624bad829c17e30221bbf144e95130f.png
npm adduser
# or
npm login
# login是adduser的一个别名
38743849692fdd2ca6849f1bc1c66e2c.png

你可以通过以下命令查看当前 npm 的登陆人

npm whoami

查看某个包的文档

每次我们想在浏览器中打开某个包的文档,总习惯去搜索引擎搜索,其实一行命令就能解决的事情,不要再去百度搜索啦~

# 此命令会尝试猜测包文档 URL 的可能位置,一般没有自定义的话,就会打开包的github地址。
npm docs [package-name]
# or
npm home [package-name]
8aed443adf08b96e75a07f8ca4b24683.gif

尝试以下命令,可以快速打开 lodash 的官方文档 👇

npm docs lodash
# or
npm home lodash

npm docs或者npm home命令在不接参数时,会在当前项目中,通过 package.json 文件中的homepage配置,来打开对应的地址。

90051b6c19e4cdf818c59a51c4b22707.png

如上图所示,其原理就是:当你要查看的项目中的 package.json 文件中,设置了homepage属性,通过npm docs/home就能打开对应的主页,没有设置homepage属性时,npm 会继续寻找其中的repository属性,这时候打开的就是项目在 github 中的托管地址 url 拼接“#readme” (例如:https://github.com/用户名/仓库名#readme),如果你repository属性也没设置,那么就会打开 npm 官网中包的所在地址,(例如:https://www.npmjs.com/package/npm-limit)

当然,你也可以在npm docs/home后不接参数,这样就会直接打开当前项目的主页。

查看某个包的代码仓库

想看某个包的源码?还要跑到 github 去搜索?nonono,也是一行代码。

# 此命令尝试猜测包的存储库 URL 的可能位置
npm repo [package-name]

👆 它是根据项目中的 package.json 文件中,设置的repository属性,来打开对应的 url。

快速给一个包提 issues

npm bugs [package-name]

👆 它是根据项目中的 package.json 文件中,设置的bugs属性,来打开对应的 url。

7c045dd337b41c6b86edc27fd2a1050e.png

查看某个包的详细信息

这个命令有什么用呢?可以很方便的看到指定包的详细信息,比如我们想找到包的作者以及 ta 的联系方式(交流学习)。

npm v [package-name]
# or
npm view [package-name]
npm info [package-name]
npm show [package-name]
ce031604ef04f96c25fd4b21cb7c76a5.png

查看某个包的所有历史版本

npm v [package-name] versions
18a7585ffab05f05116b51bd71392ed6.png

本地开发的 npm 包如何调试

我们可以像往常一样将本地开发的 npm 包安装到全局或指定目录。

npm install . -g
# 在某个项目中安装本地包
npm install ../Path/xxPackageName

也可以做一个软链指向当前需要调试的项目(全局)

npm link

将调试包链接到当前项目中(先做一个软链指向当前需要调试的项目)

# 先在本地开发的 npm 包中执行👇
npm link
# 然后切换到你要安装本地调试包的项目中,执行👇,即可将本地包安装到项目依赖中
npm link <package-name># 项目中取消安装本地的调试包👇
npm unlink <package-name>

npm 发布包

首先,你得在本地登录(不会的看文章最开头的登录方法 👆)

登录完成后,发布自己开发的工具包,只需简单的三步!

注意:使用淘宝源会报错,要改回默认源

记得每次发布前,修改下版本号!

npm version [版本号]

然后当前目录执行npm publish就好了

npm publish

弃用包的相关操作

注意:强烈建议弃用包或包版本而不是取消发布它们,因为取消发布会从注册表中完全删除一个包,这意味着任何依赖它的人都将无法再使用它,而不会发出警告。

弃用整个包

npm deprecate package-name "弃用信息"

弃用包的单个版本

npm deprecate package-name@version "弃用信息"

取消弃用操作

# 将弃用消息改为空字符串即可
npm deprecate package-name ""

取消发布(危险操作)*

取消发布整个包

npm unpublish [package-name] -f

取消发布包的指定版本

npm unpublish [package-name]@<version>

取消发布包后,以相同名称重新发布将被阻止 24 小时。如果您错误地取消发布了一个包,我们建议您以不同的名称再次发布,或者对于未发布的版本,增加版本号并再次发布。

一些好用的其他操作

包的重命名

# (重命名包的唯一方法是以新名称重新发布它)

查看当前项目中有哪些包过时了

npm outdated

查看本地全局环境的包有哪些过时了

npm outdated -g --depth=0
15d4d7a642f1942bd5087112f4dc914a.png

列出 node_modules 中的所有包

ls node_modules
# or
dir node_modules

审计项目中所有包的安全漏洞

npm audit
# 这个命令依赖 package-lock.json 文件,所以如果你用的是yarn需要使用下面的命令
yarn audit

执行后会列出有问题的包

946138ede563ef68aab17dacf5c74186.png
hahhhah
Critical需要立即解决的!
High需要尽快解决!
Moderate在时间允许的情况下解决
Low随便你,不慌不燥不急不忙

报告中会给出它问题的严重性,你就可以根据具体情况来进行版本更新或是调整。

npm token list
a4ee8c819df679f3ed738722882f3a45.png

检测一下当前镜像源的延迟

npm ping
5f43c5118508e3557e57f232c40fc731.png

检测当前 node 和 npm 存在的问题 👇

npm doctor
c017a7fef48c665c16b19e7cc720e418.png

参考资料

[1]

👉npm 官网: https://www.npmjs.com/signup


c1fabed111c6c0d433a78ebd8b15a21b.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

efb1df22fe8bd9a74f1b5311c06e3ed9.jpeg

扫码加我微信 lxchuan12、拉你进源码共读

今日话题

目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab学习:图像频域分析之Gabor滤波

很多同学需要源文档&#xff0c;所以添加了下载链接&#xff0c;方便大家共同学习进步~ 本文下载链接&#xff1a;http://files.cnblogs.com/yingying0907/Gabor%E7%AC%94%E8%AE%B0.zip Gabor变换是D.Gabor 1946年提出的。为了由信号的Fourier变换提取局部信息&#xff0c;引入…

云谦:前端框架的趋势与实践

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

element-ui表单_每日UI挑战强加-登录表单(分步教程)

element-ui表单A step by step journey to create a good design from the daily UI challenge一步步走&#xff0c;从日常的UI挑战中创建出色的设计 内容 (Content) Introduction 介绍 Result demo 结果演示 Prerequisite 先决条件 Step by step guide 逐步指南 Conclusion 结…

GitHub 搜索技巧:如何更有效地搜索 issue、repo 和更多信息

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

js 绘画js 绘画路径_绘画是一种技能,而不是才能

js 绘画js 绘画路径重点 (Top highlight)November 2019… some decided to start rocking a moustache, others were obsessed with baby Yoda. I decided to commit to drawing something every single day. As a way to keep myself accountable I started posting daily on …

点击页面元素跳转IDE对应代码,试试这几个工具!

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

shields 徽标_徽标不够用时如何设计应用程序图标

shields 徽标What’s the first thing that comes to mind when you think about a particular app? Chances are, it’s the icon. And it’s certainly the first thing a user notices when deciding what app to install — similar to studying the supermarket shelves.…

基于Sentry高效治理前端异常

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

zoom 用户被锁定_重新考虑Zoom的用户体验

zoom 用户被锁定Zoom is a household name now. It’s weird, but a new reality for 2020. I’ve been able to reliably stay in touch with so many people and even throw surprise birthday parties! It has been one of the products that has kept me busy through this…

或许是我们学错了方向?

大家好&#xff0c;我是若川。最近来了一些新朋友&#xff0c;感谢大家关注~相比于原生 JS 等源码。我们或许更应该学习正在使用的组件库的源码&#xff08;如&#xff1a;element、antd、vant、semi、arco、tdesign 等&#xff09;&#xff0c;先从简单的看起&#xff0c;Butt…

Android 默认Tab标签大小及间距修改

一般来说&#xff0c;我都是用Android默认的Tab&#xff0c;但此时Android会根据你增加的Tab页面平均分配Tab标签&#xff0c;假如你只有两个Tab&#xff0c;那么长度将会很长&#xff0c;并且其高度略微过高&#xff0c;并不好看&#xff0c;网上解决这个问题有些是自定义Tab。…

ui设计看的书_5本关于UI设计的书

ui设计看的书Want to develop a better eye and vocabulary for judging layouts, type choices and imagery?是否想开发一种更好的眼神和词汇来判断布局&#xff0c;类型选择和图像&#xff1f; According to performance experts, the best way to learn is to gain lots o…

GitHub 这8大超实用小技巧,99.9%的人都不知道!

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

案例研究设计与方法-罗伯_旭进口重新设计-用户体验案例研究

案例研究设计与方法-罗伯Asahi Imports is a Japanese grocery store located in central Austin, Texas. It has a passionate following, over fifty years’ history, and strong business growth. But its website is showing its age, and not hitting its full potential…

Taro v3.6 代号为「Reach」,已发布 canary 版本

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 lxchuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…

axure rp 创建弹框_如何在Axure RP 9中创建交换机

axure rp 创建弹框Axure is a well-known prototyping tool with a lot of history, it has been around for years. You can create almost any kind of prototypes from simple ones to more complex ones with variables and logic without writing a single line of code (…

用 Vue3 手撕了个企业级项目,真香!

最近几年&#xff0c;随着短视频、小程序、直播带货的火爆&#xff0c;前端开发工程师越来越热门&#xff0c;薪资待遇也快接近后端开发工程师了&#xff0c;前端领域进化为内卷重灾区。然而伴随着 Vue 3.0 的发布&#xff0c;前端技术也迎来了一次大革新&#xff0c;像是字节跳…

界面设计语言_使用任何语言设计界面的提示

界面设计语言Designing for international audiences is challenging. I spent most of my career in Australia designing exclusively in English. Australian English is ‘unique’ in the sense that we are really into slang, puns, idioms.为国际观众设计是具有挑战性的…

托管代码和非托管代码

托管代码和非托管代码有什么区别呢&#xff1f;从字面上理解&#xff0c;只是一个是被托管的&#xff0c;另一个是没有被托管的。但是&#xff0c;被托管的托管代码是被谁管着呢&#xff1f;让我们先来看看它们的定义。 托管代码&#xff1a;由公共语言运行库环境&#xff08;而…

如何实现前端新手引导功能?

大家好&#xff0c;我是若川。我持续组织了近一年的源码共读活动&#xff0c;感兴趣的可以 点此扫码加我微信 lxchuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试…