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許可證）