awesome npx

_墨白發表於2019-02-22

背景

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

相關文章