awesome npx

背景

在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)

复制代码

参考连接

• Introducing npx: an npm package runner – Kat Marchán – Medium

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