awesome npx

awesome npx

技术杂谈小彩虹2021-08-15 6:01:58190A+A-

背景

gayhub闲逛时,不知怎么突然想看看create-react-app(以下简称 create)的源码,来到项目主页,无意中瞄到README.md好像发生了一点小小的变化。

npx create-react-app my-app

这个 npx 是什么鬼,突然想起来前几天好像也在一些 npm 的工具包上看到过这个玩意儿,但是没有注意。既然今天又碰到了,那就好好把玩一下,毕竟create也用到了它,应该是个值得一用的好东西。看了下项目的修改记录,大约是在两个月前加入使用npx的,这也从侧面说明npx已基本趋于稳定,可以大胆的使用了。

简述

上网简单查阅了下资料,原来 npx 是跟随 npm@5.2.0 发布的,使用5.2.0版本之后的 npm,会自动帮你安上 npx,这么大的推广力度,很难不引起关注啊,之前咋没发现呐?或许是因为好久都没有升级 npm 版本的缘故吧。毕竟本地的 node 版本,不久以前才从 6.x 升级到的 8.x。对于我们这些前端开发人员来说,稳定是最重要的,基本也没有什么切换 node 版本的需求。

以下的总结,基本都是这篇 Medium 上的文章搬过来的,英语基础不错的同学,可以尝试直接阅读原文。

npx 带来了什么

直接使用项目下的工具包

以前我们使用create-react-app 初始化一个项目,大致需要以下步骤:

1. `$ npm i create-react-app -g`
2. `$ cd project-directory`
3. `$ create-react-app my-app`

如果我们使用 npx,并且刚好在想要创建项目的目录下,一行命令就可以搞定: npx create-react-app my-project npx 帮我们做了什么事呐?

1. 在当前目录下寻找是否存在 create 包
2. 如果没有找到,则会去根目录下寻找是否全局安装过 create
3. 如果还没有找到,就会下载并使用最新版本的 create ,然后初始化项目,完成后,不会有任何多余依赖的残留

相比于之前的使用方式,npx 带给我们的便处是显而易见的。对于 create 这种我们使用频率并不高的工具,其实安装在全局下的必要性并不大。下一次使用的时候,说不定就之前已经迭代好几个版本了。对于 mac 用户来说,容量寸土寸金,而 node_modules 的大小却是不容小觑的。

直接运行远端脚本

gist 在日常开发中使用还是比较广泛的,没有程序员愿意一次又一次的写重复写代码。如果我们想执行放在 gist 上的一段 node 脚本,直接用 npx 一行命令即可搞定。

$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32
npx: installed 1 in 5.217s
yay gist

需要注意的是,出于安全性考虑,请先通读 gits 上的代码是安全的,再执行命令,就像你要执行一段.sh脚本一样小心。

作为一个工具包的开发者

我可以直接在README.md中写上$ npx my-tool,让用户使用我开发工具,这个使用体验可以说是相当舒爽的。 你可以直接体验一些有意思的工具包,happy-birthday,benny-hill,workin-hard,cowsay, yo, create-react-app, npm-check等,详见awesome-npx 。 也许你担心放在 snpm上的工具无法使用,其实大可放心,用nrm等工具指定下源即可完美下载使用。或者麻烦一点就这样写:npx --registry=http://registry.npm.souche-inc.com @souche-f2e/sad-cli -h,指定 registry 即可。

shell auto-fallback

这个不知道翻译合适,就先不翻译了。 其作用就是让我们方便地使用不同版本的依赖包,比如我本地安装的是 babel@6.x,但是我想使用 babel@5.x 看看执行效果,直接执行babel@5 filename.js即可。

$ bebel@5 -V
babel@5 not found. Trying with npx...
5.8.38 (babel-core 5.8.38)

当然想只用这个功能,还是需要做一些配置的: 将对应的代码添加到对应的文件中即可, ~/.bashrc, ~/.zshrc, ~/.config/fish/config.fish

For bash@>=4:
$ source <(npx --shell-auto-fallback bash)

For zsh:
$ source <(npx --shell-auto-fallback zsh)

For fish:
$ source (npx --shell-auto-fallback fish | psub)

参考链接

自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们