search

ajhsu / blog

The external storage of my brain.
3 stars 0 forks source link

NPX Introduction #75

Open ajhsu opened 6 years ago

ajhsu commented 6 years ago

NPX

Node Package eXecutor

Built-in utility

npm 5.2+ 內建這個 Utility

WHY

$ ./node_modules/.bin/gulp
$ ./node_modules/.bin/mocha
$ ./node_modules/.bin/webpack

雖然寫在 npm script 裡頭，可以直接指定 binary name 但在 bash 還是要靠相對路徑

所以 npx 是為了讓你更方便執行這些 binary 而產生

透過 npx 我們可以把上面的 binary 呼叫化簡為

$ npx gulp
$ npx mocha
$ npx webpack

基本用法

$ npx [command]
  1. 先從 local project 或 $PATH 找 binary 執行
  2. 找不到的話，就 暫時安裝 這個 binary 並執行

執行 local binary

就像剛剛提到的

$ ./node_modules/.bin/gulp

化簡為

$ npx gulp

有差嗎？那我寫在 npm script 不就好了？

沒錯，我也這麼覺得.. 💩

但其實除了這個使用情境，還有其他「更實用」的情境

執行尚未安裝的 binary

您是否有遇過以下情境？

1. 為了嘗試一下新的套件
2. 需要把 CLI 安裝在全域環境，例如 npm install -g @vue/cli
3. 一個月可能只跑那一次
4. 甚至這輩子只跑那一次
5. 可悲的是，每次都會被提醒要更新
6. 更可悲的是，更新完也只跑一次

👉 FUCK IT 👈

使用情境 1: 透過免洗的方式，幫你安裝並執行 CLI，用完即丟

vue-cli | create-react-app 專案產生器

$ npx vue-cli init webpack my-project
$ npx create-react-app my-react-app

Prettier 整理程式碼排版

$ npx prettier --single-quote raw.json > prettier.json

Benefits

  1. 自動幫你安裝在 cache 目錄，並且幫你放到 $PATH
  2. 保證每次執行時都是最新的版本
  3. 讓你可以從 devDependency 移除只用一次的套件
  4. 有些工具特別適合在 CI 環境使用

使用情境 2: 先試用，滿意再安裝

可能你在現有專案尚未使用到最新版本，你可以先試用後，滿意再安裝

$ npx prettier -v
$ npx prettier@1 -v
$ npx prettier@1 --single-quote raw.json > prettier.json

你也可以直接從 Git Repository 執行指令

npx https://github.com/prettier/prettier.git#1.11.1 -v

使用情境 3: 使用指定 node 版本執行指令

$ npx node@4 -v
$ npx node@8 async-await.js

"npx node@9" == "node"

暫時切換全域環境

安裝 node@9 並暫時放到 $PATH 然後馬上執行 npm install & npm test

$ npx -p node@9 mocha
$ npx -p node@9 npm test
$ npx -p node@9 npm it

"npx -p node@9" == "暫時幫我切到 node@9，然後跑後面的指令"

從 Gist 執行指令

$ npx https://gist.github.com/zkat/4bc19503fe9e9309e2bfaa2c58074d32

使用情境 4: 執行一些小工具

重新整理 package.json 順序

npx sort-package-json

檢查套件版本

npx npm-check --skip-unused

啟動 local web server

$ npx http-server -d ./ -p 3000

依據目前的目錄內容，產生對應的 .gitignore

$ npx goops

在 Terminal 產生 QRCode

$ npx qrip https://www.kkbox.com

Working hard

$ npx workin-hard

產生注音文密碼

$ npx decode-zhuyin "你好嗎"

Summary

  1. 已安裝 package: 快速執行 local binary package
  2. 未安裝 package: 免洗式執行 binary package
  3. 試用特定版本的 node package

等等，如果我沒有 npm 5.2 (node > 8.2) 呢？😧

npx 本身也是一個套件， 因此在npm 5.2 之前的版本，可以透過 npm i -g npx 安裝

Reference