大家好、打給厚、胎嘎豪，覺得尷尬的時候很適合的打招呼方式 XD

今天要來講的是NPM，為什麼好像突然有點跳tone呢，因為這次鐵人賽我的主題是「寫React的那些事」，在Day1的時候有提到，這次開發React會用到的相關工具，再來幾篇都會先介紹一下周邊配備，包含設定的方式，這樣後面一步一步才能完成整個Demo練習，所以再來幾天就請大家一起跳tone惹～

NPM

Node Package Manager的縮寫，它是Node.js的套件管理，讓Javascript開發者可以模組化一些功能，開發者讓code可以被share，並且reuse，使用者不用自己重新造輪子。而且透過NPM，可以很容易update在專案中被引用的package，它還提供可以管理版本的方法，後面會依序提到。

安裝NPM

因為是Node.js開發，首先要先安裝Node.js，從Node.js 0.6.3以上的版本都已經內建裝上NPM，所以這邊安裝Node.js後就只需檢查一下NPM。

按照官網說明步驟安裝完Node.js後，可以用下面CLI指令檢查Node.js版本：

// -v記得小寫
node -v

檢查NPM版本：

// -v記得小寫
npm -v

如果想要update NPM到最新，可以執行：

// -g表示安裝在global
npm install npm@latest -g

package.json

這個檔案會設定在專案的目錄下，紀錄該專案用到的package，它是一個JSON格式的檔案，下面說明在這個檔案中幾個屬性設定值。

(1) name

name記錄你的專案(package)叫什麼，命名最好簡潔明瞭，規範上name不可以大寫，或是包含URL相關的字元。

(2) version

在NPM中name和version是重要的屬性，version是記錄目前專案版本號，當使用npm上其他package時，注意使用別人的哪個版本也很重要，如果package有任何更新都應該改變version。

(3) license

記錄授權狀態，如果你的專案要提供給別人使用，就要定義license，使用別人的專案也要注意對方的license。

(4) main

專案的entry point，這是內部的module ID，如果你的專案要提供給別人使用，假設你的package名為foo，當別人install package，使用require("foo")，你指定在main這邊的檔案會回傳object。

(name、version、license、main都是在你的package也讓別人使用時，會需要特別注意的設定，如果你的專案沒有public，通常只會用到下面的屬性。)

(5) scripts

scripts提供一個simple object，讓你可以定義一些command script在裡面，比如說：

"scripts": {
	"start": "node server.js",
	"lint": "eslint src"
	"test": "mocha test"
}

可以定義多組command，你只需要在CLI執行：

npm start
// 或是
npm run start

因為start和test是內建預設的key，所以可以直接使用 npm start 和 npm test ，但是lint是我們自己定義的，要執行必須使用npm run lint。

(6) dependencies

定義專案中有使用到的package，他也是一個一層的object，key值是package name，value值是package version，而version定義的方式可以使用X.Y.Z，或是semver range(下面會提到是什麼樣的range)，甚至可以直接指定git URL。

以官網的例子說明:

"dependencies": {
	"foo" : "1.0.0 - 2.9999.9999",
	"bar" : ">=1.0.2 <2.1.2",
	"baz" : ">1.0.2 <=2.3.4",
	"boo" : "2.0.1",
	"qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
	"asd" : "http://asdf.com/asdf.tar.gz",
	"til" : "~1.2",
	"elf" : "~1.2.3",
	"two" : "2.x",
	"thr" : "3.3.x",
	"lat" : "latest",
	"git" : "git://github.com/user/project.git#commit-ish"
	"dyl" : "file:../dyl"
}

(7) devDependencies

它和dependencies非常容易搞混，這邊定義的也是專案中會用到的package，不過～它是在run time不會用到的package，像執行test時才會用到的，或是build process過程會用到的，都屬於devDependencies。

上面只是列出一些我覺得重要的屬性，看更多可以到NPM官網 package.json。

semver

語意化版號，通常表示為X.Y.Z：

• Major version: X，最主要的版本，以v1.2.3為例，1就是major version。當有重大更新或是breaking change的時候，就會增加major數字。
• Minor version: Y，較小的版本號，以v1.2.3為例，2就是minor version。當有一些新增的功能，或是小調整的更新，就會增加minor數字。
• Patch version: Z，補丁的版本號，以v1.2.3為例，3就是patch version。當要修正問題的時候，就會增加patch數字，通常指類似相容性或是錯誤修正的更新。

在NPM中又有定義版號range的表達方式：

(1) Hyphen Ranges X.Y.Z - A.B.C

1.2.3 - 2.3.4 相當於 >=1.2.3 <=2.3.4

如果前面的版本號只顯示部分，則較小的版本號最小化，也就是補0：

1.2 - 2.3.4 相當於 >=1.2.0 <=2.3.4
1 - 2.3.4   相當於 >=1.0.0 <=2.3.4

如果後面的版本號只顯示部分，則較小的版本號最大化，因為不知道最大到幾號，所以前一個版號+1(但不包含)：

1.2.3 - 2.3 相當於 >=1.2.3 <2.4.0
1.2.3 - 2   相當於 >=1.2.3 <3.0.0

(2) X-Ranges 1.2.x 1.X 1.2.* *

x, X, * 都表示任意數值：

*     相當於 >=0.0.0 (Any version satisfies)
1.x   相當於 >=1.0.0 <2.0.0 (Matching major version)
1.2.x 相當於 >=1.2.0 <1.3.0 (Matching major and minor versions)

另外，如果只顯示部份版號，也相當於使用X-Ranges

"" (empty string) 相當於 * 相當於 >=0.0.0
1 相當於 1.x.x 相當於 >=1.0.0 <2.0.0
1.2 := 1.2.x := >=1.2.0 <1.3.0

(3) Tilde Ranges ~1.2.3 ~1.2 ~1

指定到有數值的前一個版號，看文字有一點難懂，直接看範例：

• 這邊指定[major,minor,patch]，所以有數值的是patch，可以到達最大的range就是minor+1

~1.2.3 相當於 >=1.2.3 <1.(2+1).0 相當於 >=1.2.3 <1.3.0

同理，可以知道：

~1.2 相當於 >=1.2.0 <1.(2+1).0 相當於 >=1.2.0 <1.3.0 (Same as 1.2.x)
~1 相當於 >=1.0.0 <(1+1).0.0 相當於 >=1.0.0 <2.0.0 (Same as 1.x)
~0 相當於 >=0.0.0 <(0+1).0.0 相當於 >=0.0.0 <1.0.0 (Same as 0.x)

(4) Caret Ranges ^1.2.3 ^0.2.5 ^0.0.4

指定到有最大且不為0的版號，看文字有一點難懂，直接看範例：

• 這邊指定[major,minor,patch]，所以最大版號是major(且不為0)，可以到達的range就會是major+1

^1.2.3 相當於 >=1.2.3 <2.0.0

如果當最大版號有0的情況，就要找不為0的最大版號

^0.2.3 相當於 >=0.2.3 <0.3.0
^0.0.3 相當於 >=0.0.3 <0.0.4

通常安裝package透過CLI自動寫入package.json時，都會採用最後一種Caret Ranges，因為最make sense，如果使用的package作者有按照版號的規範去修改package，major會有breaking change，所以只更新到minor。而在v1之前，因為還沒有stable版本釋出，v0.2.4到v0.3.0有breaking change是很常發生的，所以才有不為0的規定在裡面。

官網還有許多更詳細的說明，看更多可以到The semantic versioner for npm。

建立package.json

在CLI執行下面script，它會按照步驟產生package.json，把每個建議要填的屬性都問一次：

npm init

而下面的指令可以直接產生預設的package.json內容，不會問問題：

npm init -y

執行上面init的指令後，就會在執行指令的路徑下產生一個package.json檔案，打開來也都看得懂定義些什麼，是不是滿簡單的呀！

安裝package

NPM會把package.json指定的package下載到node_modules的資料夾中，如果要重新安裝所有package.json設定的dependencies和devDependencies，可以在CLI執行：

npm install

如果在開發階段，要特別安裝某一個package，這邊用react為例

npm install react

如果除了安裝，同時也自動寫入package.json，可以加上 --save 或 -S

npm install react --save

就會顯示在package.json的dependencies區塊

"dependencies": {
	"react" : "^15.3.1"
}

如果要安裝的package是屬於build階段才會用到的，例如：webpack，要寫在devDependencies區塊中，要加上 --save-dev 或 -D

npm install webpack --save-dev

就會顯示在package.json的devDependencies區塊

"devDependencies": {
	"webpack" : "^1.13.1"
}

安裝在node_modules裡面的packages算是local安裝，如果這個package需要在CLI被使用，則需要加上-g，安裝在global中：

npm install mocha --g

這邊需要注意的是global安裝，需要提供足夠的權限，例如：前面加上sudo。