Node.js + NPM

Node.js

Node.js 出現之前，JavaScript 通常作為用戶端程式設計語言使用，以 JavaScript 寫出的程式常在用戶的瀏覽器上執行。Node.js 的出現使 JavaScript 也能用於伺服器端編程。Node.js 含有一系列內置模組，使得程式可以脫離 Apache HTTP Server 或 IIS，作為獨立伺服器執行。

npm

Node Package Manager，是 Node.js 的套件管理工具，用於從 NPM Registry 中下載、安裝 Node.js 程式，同時解決依賴問題。npm 提高了開發的速度，因為它能夠負責第三方 Node.js 程式的安裝與管理。

指令 npm init

// 使用 npm 建立一個新專案

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm_demo) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/HYWEB_R00_99028/Desktop/npm_demo/package.json:

{
  "name": "npm_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

若你不想要輸入資料可以透過下列的參數

npm init --yes
npm init --force
npm init -y
npm init -f

package.json

{
  "name": "npm_demo", //專案的名字，它預設就是該目錄名
  "version": "1.0.0",
  "description": "",
  "main": "index.js",//專案切入點
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm 5 以前，我們可以使用 npm shrinkwrap 來產生 npm-shrinkwrap.json，試著紀錄第一次安裝的所有版本，可是 shrinkwrap 檔案，你安裝完後都得手動去使用 npm shrinkwrap 來更新

指令 npm install jquery

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

package-lock.json

{
  "name": "npm_demo",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "jquery": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
    }
  }
}

指令 npm install jquery --save

--save 參數是指定安裝套件在 local project

package.json

{
  "name": "npm_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  }
}

指令 uninstall

// 移除全域套件 
npm uninstall <package name> -g

// 移除專案裡的套件
npm uninstall <package name>

scripts

指令 npm start / npm build / npm test

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
}

"scripts": {
    "start": "webpack-dev-server --mode=development -d --hot",
    "build": "webpack --mode=production --progress --profile --colors"
}

指令 npm link

可以使用 npm link 參考到拆開的外部模組

$ # 先去模組目錄，把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去專案目錄下 link 外部模組
$ cd path/to/my-project
$ npm link my-utils

自訂的指令

除了基本的 start 與 test 你也可以撰寫自訂的指令但此之前，如何透過環境變數，讓 npm 知道你的檔案位置在哪，然後透過指令的方式執行它可以使用 npm bin 找出本地端的 node_module 執行檔的資料夾，然後用在 sciprt 指令中

 "eslint" : "$(npm bin)/eslint --cache --fix ./"

若要啟動，執行 npm run eslint 或 npm run-script eslint 即可啟動

你可以透過 npm run env，列出相關的環境設定透過 npm run env | grep "^PATH" 找出 PATH 的設定列出來之後會發現 /Users/HYWEB_R00_99028/Desktop/npm_demo/node_modules/.bin 有列在 PATH 中所以不需要再 script 上面加 $(npm bin) ，直接執行 eslint 即可

PATH=/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/HYWEB_R00_99028/Desktop/npm_demo/node_modules/.bin::/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/HYWEB_R00_99028/android-sdk-macosx/tools:/Users/HYWEB_R00_99028/android-sdk-macosx/tools/bin:/Users/HYWEB_R00_99028/android-sdk-macosx/platform-tools

如果你想要透過一個指令，執行數個指令的話可透過 && 將指令串接在一起

"serial": "npm test && npm start && npm run eslint"

執行：npm run serail 即可

丟參數給 npm scripts

透過兩個 -- 放在 npm 的指令與參數中間例如：

{
    "lint:checkstyle": "npm run lint -- --reporter checkstyle > checkstyle.xml"
}

yarn

https://yarnpkg.com/zh-Hans/

Yarn 使用的資料庫還是 npm，它會暫存下載的每個套件，所以無須重複下載，最大化資源利用率，加速安裝速度。透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/ )，也就是只要安裝過一次，下次砍掉 node_modules 目錄重新安裝都會從 Cache 讀取，而為了避免版本的錯誤匹配，每次套件安裝時 Yarn 會創建或更新一個 yarn.lock文件來管理安裝的套件版本。

yarn install

npm install 命令會根據 package.json 安裝依賴模組，並且允許增加新的模組；yarn install 會按照 yarn.lock 或 package.json 裡面的依賴順序來安裝模組。

yarn add [–dev]

與 npm install 類似，yarn add 允許你增加與安裝其他模組，新加入的依賴模組也會一並寫入 package.json，類似 npm 的 --save 參數；Yarn 的 --dev 參數則是添加開發的依賴，類似 npm 的 --save-dev 參數。

Node.js

npm

package.json

package-lock.json

package.json

scripts

自訂的指令

丟參數給 npm scripts

yarn

yarn install

yarn add [–dev]

Ref