###### tags: `Angular` `npm`
# 🌝[T]npm腳本
## 前言
> npm 是 Node Package Manager的簡稱，是個線上套件庫，可以下載各式各樣的Javascript套件使用。
### package.json 專案資訊檔

- name: 專案名稱，`預設目錄名`
- version: 專案版本
- scripts: 專案npm腳本
- description: 專案描述
- entry point: 專案切入點
- test command: 專案測試指令
- git repository: 專案原始碼版控位置
- keywords: 專案關鍵字
- author: 專案作者， `author-name<[[e-mail]](mailto:[e-mail])>`
- license: 專案版權

## 什麼是npm腳本?

💡我們使用腳本來自動執行重複性的任務，例如: 建構，除了npm外還有Gulp或Grunt可以使用。

npm允許在package.json，使用scripts定義腳本命令。

💡scripts裡的屬性(腳本命令)各對應一段腳本。
  這些定義在package.json `scripts`裡的腳本，稱為npm腳本。

在終端機使用npm run [script-name]就可以執行腳本。

想查看當前項目所有的npm腳本，可使用npm run。

## 如何編寫npm腳本?

💡當執行npm run時，會自動建立一個shell，在裡面執行腳本。
  所以只要是shell內可以執行的指令，就可以寫在腳本內。

### 新增npm腳本
只要在package.json `scripts` 添加腳本命令(自訂)、指令即完成

ng server = node %~dp0/../node_modules/@angular/cli/bin/ng serve

若想編寫的npm腳本是有關部署的 可參考webpack文件。

💡Angular CLI 是使用Webpack來打包程式。

> webpack文件 [https://webpack.js.org](https://webpack.js.org/)

> Terminal指令[Angular CLI命令](https://www.javatpoint.com/angular-7-all-cli-commands)
- `--` 來分隔選項，後面接的東西會當參數傳進去

[https://stackoverflow.com/questions/11580961/sending-command-line-arguments-to-npm-script](https://stackoverflow.com/questions/11580961/sending-command-line-arguments-to-npm-script)

[https://stackoverflow.com/questions/4351521/how-do-i-pass-command-line-arguments-to-a-node-js-program](https://stackoverflow.com/questions/4351521/how-do-i-pass-command-line-arguments-to-a-node-js-program)

- progress 進度條，--progress=false 進度條不要執行
- source-map原始碼對應表

# 補充

---

## webpack & gulp 差異

webpack與gulp都是可以編譯preprocess的工具，

- ***gulp*** : 偏向命令編寫 (意思是所有編譯動作的邏輯都需要自己編寫)
- ***webpack***: 偏向設定，有一定的規範，相較清楚 (優點他人易接手)

兩者選擇推薦webpack，目前gulp已停止更新了

## package.json & package-lock.json

- ***package-lock.json*** : 安裝依賴時，包的版本，依官方文檔說明，此檔案是在npm install時紀錄安裝的各個npm package具來源及版本。
- ***package.json*** : 專案資訊檔，用來管理與package間依賴關係，許允開發者在檔案中設定npm對各包的依賴。

## src & dist

- ***src*** : 專門放Preprocess的檔案，此資料夾部會丟上server部署
- ***dist*** : 經過webpack編譯打包後，產出瀏覽器看得懂的html、css、js，也是此資料夾去部署