快速打开 npm 包小技巧

背景

前段时间跟同事一起查问题的时候,发现他打开 npm 包的方式是直接从命令行中输入命令 npmView xxx(包名),感觉非常快捷,而我总是只能,打开浏览器 -> 输入 npm xxx 搜索 -> 进入 npm 页面,差就差了好几步,而且感觉动作甚至有些笨拙。

实现

虽然想想就知道是借助环境变量 alias 来实现的,但其实本身对于一些 bash 之类的脚本根本不熟悉,只知道 mac 中可以通过 open https://www.npmjs.com/package/egg 以及 windows 中可以通过 start https://www.npmjs.com/package/egg 打开页面。

但是显然如果要实现 npmView egg 就打开页面还是需要有变量的替换以及判断的。

mac

在 mac 场景中实现会快捷许多,这里首先默认大家都装了 zsh。

打开终端输入 vim ~/.zshrc

在文件中添加如下代码:

bash 复制代码
view_npm() {
  if [[ -n $2 ]]; then
    # 如果带了版本号就直接拼上版本号的路由
    open "https://www.npmjs.com/package/$1/v/$2"
  else
    open "https://www.npmjs.com/package/$1"
  fi
}

alias npmView=view_npm

保存文件后执行 source .zshrc

然后在终端输入 npmView egg 或者 npmView egg 3.20.0 就能看到效果啦~

windows

本人对于 windows 实在不熟悉,但是还好有 gpt...

在 windows 中我们可以写一个批处理脚本

在任意位置创建一个名为 npmView.txt 的记事本,在文件中写入如下内容

bash 复制代码
@echo off
set package=%1
set version=%2

if "%version%"=="" (
    start https://www.npmjs.com/package/%package%
) else (
    start https://www.npmjs.com/package/%package%/v/%version%
)

而后重新命名为 npmView.bat

PowerShell

在 powerShell 中创建 alias

打开 PowerShell 窗口,输入 echo $PROFILE,会出现如下路径,这个是 PowerShell 的配置文件

打开该文件,在文件中写入如下内容

vbnet 复制代码
Set-Alias npmView -Value "上一步保存的 npmView.bat 的绝对路径"

然后关闭 PowerShell 并重新打开

然后在终端输入 npmView egg 或者 npmView egg 3.20.0 就能看到效果啦~

CMD

由于 cmd 中没有 alias 的能力,推荐使用能力更强的 powershell,如果非要在 cmd 中使用,你需要把 npmView.bat 保存到 PATH 中的某个目录(例如 C:\Windows 或 C:\Windows\System32),而后打开 cmd 。

在终端输入 npmView egg 或者 npmView egg 3.20.0 就能看到效果啦~

如果对你有所帮助,期待你的点赞~

相关推荐
Muxxi几秒前
shopify模板开发
前端
Yueyanc几秒前
LobeHub桌面应用的IPC通信方案解析
前端·javascript
我是若尘15 分钟前
利用资源提示关键词优化网页加载速度
前端
moyu8418 分钟前
跨域问题解析(下):Nginx代理、domain修改与postMessage解决方案
前端
moyu8432 分钟前
跨域问题解析(上):JSONP、CORS与Node代理解决方案
前端
moyu8436 分钟前
深入理解TCP的三次握手与四次挥手
前端
不一样的少年_1 小时前
头像组件崩溃、乱序、加载失败?一套队列机制+多级兜底全搞定
前端·vue.js
Code_XYZ1 小时前
uni-app x开发跨端应用,与web-view的双向通信解决方案
前端
wordbaby1 小时前
构建时规划,运行时执行:解构 React Router 的 prerender 与 loader
前端·react.js
用户5806139393001 小时前
【前端工程化】Eslint+Prettier vue项目实现文件保存时自动代码格式化
前端