摘要:簡單介紹npm的使用，以及package.json的好用功能
npm(Node Package Manager)是基於Node.js的Package管理程式，可以用來安裝及卸除許多使用Javascript寫的Package。目前安裝npm很簡單，只需要到node.js官網下載並安裝node.js，npm也會隨著一起安裝。這篇文章是基本的使用筆記，想更清楚的了解npm的使用方式，可以參考這篇-nodejs-tw/NPM套件管理工具
npm的基本功能
npm的指令都是在CommandLine中執行，底下是常用的命令
- npm -v => 列出npm目前的版本
- npm install => 安裝package
- npm uninstall => 移除package
- npm update => 更新package
- npm install -g => 全域安裝
- npm install --save => 安裝後寫在package.json的dependence中
- npm install --save-dev=> 安裝後寫在package.json的devDependence中
- npm help => 查詢可用指令
Package.json是npm的設定檔，裡面列出專案中使用到的Package。Package.json可以自行編輯，當執行npm的command，例如npm install --save時，npm也會把當下安裝的Package的名字及版本寫到Package.json中。底下是一個簡單的Package.json檔Sample
{
"name": "application-name"
, "version": "0.0.1"
, "private": true
, "dependencies": {
"express": "2.5.5"
, "coffee-script": "latest"
, "mongoose": ">= 2.5.3"
}
, "devDependencies": {
"browserify": "^10.2.4"
}
}
使用Package.json當作管理Package的工具是很方便的，只要在裡面的dependencies區塊中寫好要安裝的package。再執行npm install，就可以一次把要安裝的Package安裝完成。另外devDependencies區塊是定義開發當中會用到的package，例如browserify
設定版本別有特定的寫法，以管理版本的相依性。其Sample如下：
- "express": "2.5.1" => 只能使用2.5.1的版本
- "express": "latest" => 使用最新版本(每次更新都會檢查是否有新版本)
- "express": ">= 2.5.1" => 所有比2.5.1還新的版本
- "express": “~2.5.1" => 所有比2.5.1還新的2.5.x的版本，但不會到2.6.0
- "express": “^2.5.1" => 所有比2.5.1還新的2.x.x的版本，但不會到3.0.0
面對前端的浪潮，Microsoft也開始注意到這方面的需求。VS2015大量的支援 bower, gulp, grunt就是最好的證明，所以npm當然可以很方便的使用。VS2015中直接打開Package.json，就會有Intellisense可以帶出版本號，以及相關功能。只要按下儲存，就會自動安裝Package，連下npm install的指令都不需要打。
至於Visual Studio 2013，則可以使用這個Extension - Package Intellisense，下圖是其功能的展示
開發前端程式的過程中，有些Task需要處理，例如需要透過browserify進行bundle，或是寫React需要轉換JSX檔，或是使用watchify自動監控檔案異動。這些任務管理，目前有好用的gulp, grunt可以處理。但如果只是很簡單的一兩個Task，例如使用browserify，其實透過Package.json就可以做到了。
關鍵點是在Package.json的scripts這個區塊中，寫好要執行的command line命令。如下圖的Sample
"scripts": {
"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js",
"build-css": "cat static/pages/*.css tabs/*/*.css",
"build": "npm run build-js && npm run build-css",
"watch-js": "watchify browser/main.js -o static/bundle.js -dv",
"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v",
"watch": "npm run watch-js & npm run watch-css",
"start": "node server.js",
"test": "dir"
}
這樣，就可以在command line下指令 - npm run以執行想要執行的Task
例如上例中下指令 - npm run test，就等於在command line下dir的指令
另外，也可以依序執行多個task。例如上例中有build-js與build-css這兩個task，可以透過 && 將兩個task連結起來，放到build這個task中。所以下指令npm run build就可以執行build-js與build-css這兩個task了。