前端開發｜nr – 一個簡化npm run script 的工具

這篇文章主要跟大家分享一個簡化 npm run script的工具：nr

從這篇文章你會知道：

• nr安裝方法
• nr使用方法
• nr操作實例

您有沒有過這樣子的困擾？
package.json中的script指令太簡潔，常常會忘記指令的作用是什麼？
若是描述清楚、指令又會太長，容易輸入錯誤。

那麼你一定會喜歡nr這個工具，安裝nr之後，只要在package.json所在的目錄底下輸入nr命令，就可以把所有的設定好的script指令列出來，使用上下鍵來選擇需要的指令，也可以模糊搜尋指令，是一個相當方便的工具

安裝方法

直接輸入以下指令安裝

npm install -g nr-cli

使用方法

在package.json所在的目錄中、輸入指下底下指令

nr

操作實例

範例：

{
  "name": "project name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install": "npm install",
    "watch": "webpack watch",
    "develop": "webpack-dev-server --mode development",
    "build": "cross-env NODE_ENV=development webpack",
    "production": "cross-env NODE_ENV=production webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

假設我們專案的package.json設定如上，一般情況之下、如果我們想指執行指命、應該要輸入npm rum 指令名稱。以上面的設定來說，可以輸入：

npm rum install
npm rum watch
npm rum develop
npm rum build
npm rum production

安裝nr之後，只要輸入nr你可以得指以下資訊

? 请选择你要运行的命令： (Use arrow keys or type to search)
❯ install
  watch
  develop
  匯出專案(開發模式)
  匯出專案(生產模式)

接著只要使用上下錄選擇你要的指令、按下Enter就可以了。

一般我們的script在命名的時候會盡量算單化，避免使用中文，就只是為了敲鍵盤的時候方便而已。現在有了nr，script的命名就可以很隨性，你也可以改成底下的設定：

範例：

{
  "name": "project name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install": "npm install",
    "watch": "webpack watch",
    "develop": "webpack-dev-server --mode development",
    "匯出專案(開發模式)": "cross-env NODE_ENV=development webpack",
    "匯出專案(生產模式)": "cross-env NODE_ENV=production webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

輸入nr你可以得指以下資訊

? 请选择你要运行的命令： (Use arrow keys or type to search)
❯ install
  watch
  develop
  匯出專案(開發模式)
  匯出專案(生產模式)

接著一樣使用上下錄選擇你要的指令、按下Enter就可以了。

〖參考資料來源〗：
nr-cli：https://www.npmjs.com/package/nr-cli

以上就是歐斯瑞本次 『前端開發｜一個簡化 npm run script 的工具』 分享

記得訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。