{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `Node.js`

[Node.js] package.json & package-lock.json
===

[TOC]

## package.json

- 雖然看起來麻煩，但是他本質上包含了專案的版本控管概念
- 利用 package.json 安裝完以後旁邊會出現 package-lock.json 這隻程式，這隻程式的功能也是設定檔的概念。
- 如果你安裝套件在全域的話，就有可能發生為了一個專案更新套件後，其他的專案因為該套件而無法執行。
- 為了避免這樣的事情發生，package.json 個別安裝的方式是非常好用的。
- package.json 真正主要的功能其實是專案設定與可以一次安裝多項套件，並且解決相依性問題。
- 套件無法直接使用，指令行的程式要執行的話必須要在 package.json 寫 script 項目，並且透過 npm 來執行

> 
> <small>webpack 前端資源打包程式，必須要執行 npm run watch 才能執行 webpack -w 的功能。</small>

## dependencies & devDependencies

:::info
參考：[包应该放在devDependencies还是dependencies](https://guxinyan.github.io/2017/11/02/%E5%8C%85%E5%BA%94%E8%AF%A5%E6%94%BE%E5%9C%A8devDependencies%E8%BF%98%E6%98%AFdependencies/)
:::

- ~~都會在使用 `npm install` 後安裝到 `node_modules` 中~~
- 撰寫前端專案時，可說是沒有區別
- 使用 `npm install` 後都會安裝到 `node_modules` 中
- 輸出時才有差異
- 如果是開發NPM套件
- 使用 `npm install` 後，只有紀錄在 dependencies 的套件會安裝到 `node_modules` 中
- `devDependencies` 則不會安裝

### dependencies

- 程式到發布版本時，仍然需要的套件
- EX：
- 我們寫一個項目要依賴jQuery，沒有這個包的依賴運行就會報錯，這時候就把這個依賴寫入dependencies，會被打包進最終的js文件裡。

### devDependencies

- 裡面的插件只用於開發環境
- EX：
- 用 babel 來把我的 ES6 語法轉為 ES5
- 我需要 sass 套件將我的 sass 轉成 css，但是發布版本已經是 css 了，就不需要再有 sass 套件了。

## package-lock.json

:::info
保證開發團隊中，每個人使用的套件版本都是一致的
:::

- 專案交給他人時不會連同 `node_modules` 一起給過去，因為 `node_modules` 中考能包含太多東西
- 觀察 `package.json`，有時會在套件版本上看到一個 `^` 的標誌
- 這代表如果在執行 `npm install` 時，套件可以安裝最新的版本

> 
> 圖中的 `jquery` 可以安裝比 `3.6.0` 更高的版本，像是 `3.7.0` , `3.8.0` ....

> 
> 從 `package.json` 的 `^3.0.0` 的版本敘述，找到 `3.6.0` 這個版本

- `package-lock.json` 會限制 `npm install` 的安裝版本
- 會這樣是因為如果把專案交給其他人，可能會希望安裝 `package.json` 的預設版本
- 但是開發中可能不會希望有變更開發版本的狀況，雙方使用的版本應當一致
- 所以會使用 `package-lock.json` 來限制版本的更新


### 結論

- 當沒有 `package-lock.json` 時，套件版本依據 `package.json` 為基準
- 有 `package-lock.json` 時，套件版本依據 `package-lock.json` 為基準