一篇文章搞定什麼是nodeJs它和NPM關係與應用

現在前端的入門門檻越來越高了，不再是單純 html+css+js，各種前端框架 層出不窮，各種ui元件庫層出不窮。

模組化，打包化，各種工具庫層出不窮，前端變成大前端 ，甚至前端可以搞定整個專案，透過node作為服務端api，

這裡我們主角就是nodeJs

什麼是nodejs

javaScript是一門指令碼語言，通常被用來編寫、執行本地原始碼。指令碼語言需要一個解析器才能執行，HTML檔案中的JavaScript程式碼由瀏覽器解析執行。而自行執行JavaScript程式碼則需要Node.js解析器才能執行。

每個解析器都是一個執行環境，允許JavaScript定義各種資料結構和執行各種計算，同時也允許JavaScript呼叫執行環境提供的內建物件和方法。瀏覽器環境下，JavaScript常被用來操作DOM等功能，因此瀏覽器提供了document等內建物件；在Node.js環境下，JavaScript通常用來處理磁碟檔案和搭建HTTP伺服器，因此Node.js提供了fs、http等內建物件。

Node.js是一個基於V8引擎的JavaScript執行環境。V8引擎具有快速執行JavaScript程式碼的能力，並且效能非常優秀。Node.js專注於最佳化一些特殊用例，並提供了替代的API，在非瀏覽器環境下更好地執行V8引擎。

作為一種伺服器端JavaScript平臺，Node.js能夠快速建立網路應用程式。同時，它也支援前後端JavaScript程式設計，為開發者提供了更高效的系統設計和一致性。

NodeJS特性

以下是一些使得Node.js成為軟體架構師的首選的重要特徵：

1. 非同步和事件驅動的Node.js庫- 所有API都是非同步非阻塞的，這意味著Node.js伺服器不必等待API返回資料。它可以立即移動到下一個API呼叫，利用Node.js事件通知機制來獲取從API呼叫獲得的響應。這種非同步的事件驅動機制，使得伺服器可以高效地響應並快速處理大量請求。

2. 非常快的Node.js程式碼執行- Node.js程式碼在谷歌Chrome的V8 JavaScript引擎上執行，速度非常快。

3. 單執行緒但高度可擴充套件的Node.js - Node.js使用事件迴圈單執行緒模型，事件機制有助於伺服器以非阻塞的方式響應請求，這使得伺服器具備高度可擴充套件性。相比傳統伺服器使用建立執行緒等方式來處理請求，Node.js使用單執行緒和單一程式處理方式，能夠更好地處理大量請求，並具備更高的可擴充套件性。例如，Node.js可以比傳統的Apache HTTP伺服器處理更多請求。

4. 無緩衝的Node.js應用 - Node.js應用程式從來不需要緩衝任何資料。這些應用程式只需輸出塊中的資料，不需要在記憶體中緩衝大量資料。

總之，以上特點都讓Node.js成為軟體架構師的首選，因為它可以高效地響應請求並處理大量請求，從而提高系統的效能和可擴充套件性。

統一在Javascript瀏覽器之外的實現， CommonJS

自從Netscape瀏覽器問世以來，JavaScript就一直在探索本地程式設計的路。 不幸的是，當時服務端JavaScript的發展基本上是借鑑其他伺服器端語言的實現，因此缺乏特色和實用價值。 隨著JavaScript在前端應用的廣泛應用以及服務端JavaScript的推進，JavaScript現有的規範變得非常弱，難以滿足JavaScript在大規模應用方面的需求。在以JavaScript為宿主語言的環境中，只有基本的原生物件和型別，其他物件和API取決於宿主的提供，因此，JavaScript缺乏以下功能：

1. 模組系統：沒有原生支援的閉包作用域或依賴管理。
2. 標準庫：除了一些核心庫外，沒有檔案系統API和IO流API等。
3. 標準介面：缺乏像Web伺服器或資料庫這樣的統一介面。
4. 包管理系統：不能自動載入和安裝依賴。

因此，CommonJS（http://www.commonjs.org）規範應運而生，目的是為了構建JavaScript在包括Web伺服器、桌面、命令列工具以及瀏覽器中的生態系統。

CommonJS試圖定義一套可供普通應用程式使用的API，以填補JavaScript標準庫過於簡單的不足。 其終極目標是制定類似於C ++標準庫的規範，使基於CommonJS API的應用程式可以在不同的環境下執行，就像使用C ++編寫的應用程式可以使用不同的編譯器和執行時函式庫一樣。例如：模組、包、系統、二進位制、控制檯、編碼、檔案系統、套接字、單元測試等等。

Node.js是CommonJS規範最流行的實現之一。Node.js實現了require方法作為其模組引入的方法，同時，NPM則基於CommonJS規範定義的模組規範，實現了依賴管理、模組自動安裝等功能。

常用框架

1. express:完善、出現早、文件全、社群大
2. koa:超前，完善中
3. hapi：複雜，適合大型專案

NodeJS下載安裝

NodeJS提供了一些安裝程式可以從nodejs.org下載安裝。

管理Nodejs版本

n

n是一位鼎鼎大名的TJ Holowaychuk所寫的Node.js模組，（鼎鼎大名的Express框架作者）旨在提供一個簡單、直觀的方式來管理Node.js版本。正如其名字所示，它追求的理念就是簡潔——無需使用子Shell、配置檔案或臃腫的API，僅提供簡單易用的功能。

n模組的主要功能是讓使用者可以輕鬆地安裝、使用和管理不同版本的Node.js。如果您想要安裝n模組，可以按照以下步驟進行操作：

npm install n -g

安裝完成之後，直接輸入n後輸出當前已經安裝的node版本以及正在使用的版本（前面有一個o），你可以透過移動上下方向鍵來選擇要使用的版本，最後按回車生效。

安裝最新的版本

n latest

安裝穩定版本

n stable

n後面也可以跟隨版本號比如：

n v0.10.26

n 0.10.26

刪除某個版本

$ n rm 0.10.1

以指定的版本來執行指令碼

$ n use 0.10.21 some.js

常用命令

n          # 顯示所有已下載版本
n 10.16.0  # 下載指定版本
n lts      # 檢視遠端所有 LTS Node.js 版本
n run 10.16.0 # 執行指定的 Node.js 版本

  n                              Display downloaded Node.js versions and install selection
  n latest                       Install the latest Node.js release (downloading if necessary)
  n lts                          Install the latest LTS Node.js release (downloading if necessary)
  n <version>                    Install Node.js <version> (downloading if necessary)
  n install <version>            Install Node.js <version> (downloading if necessary)
  n run <version> [args ...]     Execute downloaded Node.js <version> with [args ...]
  n which <version>              Output path for downloaded node <version>
  n exec <vers> <cmd> [args...]  Execute command with modified PATH, so downloaded node <version> and npm first
  n rm <version ...>             Remove the given downloaded version(s)
  n prune                        Remove all downloaded versions except the installed version
  n --latest                     Output the latest Node.js version available
  n --lts                        Output the latest LTS Node.js version available
  n ls                           Output downloaded versions
  n ls-remote [version]          Output matching versions available for download
  n uninstall                    Remove the installed Node.js

n 只適用於 macOS 和 Linux ，不適用於 Windows。

nvm

nvm是一款流行的Node.js版本管理工具，可以透過命令列介面實現快速、簡便的Node.js版本安裝、切換和管理。使用nvm，您可以輕鬆地安裝和切換不同版本的Node.js，以適應不同的開發需求和應用場景。同時，nvm還具備方便的命令列介面和完善的文件支援，讓使用者能夠快速上手並進行高效的開發工作。

nvm 只適用於 macOS 和 Linux 使用者的專案，如果是 Windows 使用者，可以使用 nvm-windows 、nodist 或 nvs 替換。

# 方式1 瀏覽器開啟下面連結下載
https://github.com/nvm-sh/nvm/blob/v0.39.1/install.sh
# 下載完成後，透過命令安裝
sh install.sh

# 方式2 推薦
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 方式3
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安裝過程中如果遇到一些奇怪的問題，可以檢視下 nvm 補充說明。

常用命令

nvm ls                # 檢視版本安裝所有版本
nvm ls-remote         # 檢視遠端所有的 Node.js 版本
nvm install 17.0.0    # 安裝指定的 Node.js 版本
nvm use 17.0.0        # 使用指定的 Node.js 版本
nvm alias default 17.0.0  # 設定預設 Node.js 版本
nvm alias dev 17.0.0  # 設定指定版本的別名，如將 17.0.0 版本別名設定為 dev

fnm

fnm 是一款快速簡單 ? 的 Node.js 版本管理器，使用 Rust 構建。

主要特點包括：

1. ? 跨平臺支援，包括：macOS、Windows、Linux；
2. ✨ 單一檔案，輕鬆安裝，即時啟動 ；
3. ? 以速度為設計理念；
4. ? 適用於 .node-version 和 .nvmrc 檔案；

macOS / Linux 環境：

# bash, zsh and fish shells
curl -fsSL https://fnm.vercel.app/install | bash

Windows 環境：

# 管理員模式開啟終端，安裝後只能使用管理員模式開啟使用

choco install fnm

# 安裝完成還需要手動設定環境變數

Linux/macOS/Windows 環境也可以直接下載二進位制檔案安裝，下載地址：https://github.com/Schniz/fnm/releases

常用命令

fnm -h             # 檢視幫助
fnm install 17.0.0 # 安裝指定 Node.js 版本
fnm use 17.0.0     # 使用指定 Node.js 版本
fnm default 17.0.0 # 設定預設 Node.js 版本

Node.js模組系統

為了讓Node.js的檔案可以相互呼叫，Node.js提供了一個簡單的模組系統。
模組是Node.js 應用程式的基本組成部分，檔案和模組是一一對應的。換言之，一個 Node.js 檔案就是一個模組，這個檔案可能是JavaScript 程式碼、JSON 或者編譯過的C/C++ 擴充套件。

模組化程式設計

隨著網頁應用程式的不斷髮展，網頁的功能越來越類似於桌面程式，需要許多不同的人協同工作並進行進度管理、單元測試等等。因此，軟體工程的方法逐漸成為網頁開發者必不可少的技能。在此情境下，Javascript模組化程式設計成為一項迫切的需求。透過模組化程式設計，開發者只需要專注於實現核心業務邏輯，而其他的任務則可以由其他開發者編寫的模組來實現。

模組化程式設計的優勢在於可以避免常見的問題，比如命名衝突和檔案依賴。

透過模組化程式設計，我們可以避免在程式碼中出現重複的變數名或函式名，從而確保程式碼的正確性和可維護性。

另外，使用模組化程式設計還可以解決檔案依賴問題，開發者可以輕鬆地管理程式碼中的各個模組之間的依賴關係，並確保它們能夠正確地載入和執行。這些優勢使得模組化程式設計成為現代網頁開發中不可或缺的一部分。

Node中模組分類

NodeJS中模組分為2類：原生模組和檔案模組。

原生模組即Node.jsAPI提供的原聲模組，原生模組在啟動時已經被載入。(如：os模組、http模組、fs模組、buffer模組、path模組等)

//呼叫原生模組不需要指定路徑
var http = require('http');

檔案模組為動態載入模組，載入檔案模組的主要由原生模組module來實現和完成。原生模組在啟動時已經被載入，而檔案模組則需要透過呼叫Node.js的require方法來實現載入。

//呼叫檔案模組必須指定路徑，否則會報錯
var sum = require('./sum.js');

模組操作

在編寫每個模組時，都有require、exports、module三個預先定義好的變數可供使用。

require 載入模組

require方法接受以下幾種引數的傳遞：

1. http、fs、path等，原生模組。
2. ./mod或../mod，相對路徑的檔案模組。
3. /pathtomodule/mod，絕對路徑的檔案模組。
4. mod，非原生模組的檔案模組。

require函式在當前模組中被使用以載入其他模組。傳入模組名後，將返回一個包含匯出物件的模組。模組名可以是相對路徑（以./開頭）或絕對路徑（以/或C:這樣的磁碟機代號開頭）。此外，模組名中的.js副檔名可以省略。以下是一個示例：

var foo1 = require('./foo');
var foo2 = require('./foo.js');
var foo3 = require('/home/user/foo');
var foo4 = require('/home/user/foo.js');
//foo1 ~ foo4 中儲存的是同一個模組的匯出物件。

//載入node 核心模組
var fs = require('fs');
var http = require('http');
var os = require('os');
var path = require('path');

載入和使用json檔案

var data = require('./data.json');

exports 建立模組

exports物件是當前模組的匯出物件，用於匯出模組公有方法和屬性。別的模組透過require函式使用當前模組時得到的就是當前模組的exports物件。以下例子中匯出了一個公有方法。

//sum.js
exports.sum = function(a,b){
    return a+b;
}

//main.js
var m = require("./sum");
var num = m.sum(10,20);
console.log(num);

module

透過module物件可以訪問到當前模組的一些相關資訊，但最多的用途是替換當前模組匯出物件。例如模組預設匯出物件預設是一個普通物件，如果想改為一個函式可以透過如下方式： 匯出一個普通函式：

//sum.js
function sum(a,b){
    return a+b;
}
module.exports= sum;
//main.js
var sum = require('./sum');
sum(10,20);// 30

匯出一個建構函式：

//hello.js
function hello(){
    this.name ="你的名字";
    this.setName = function(name){
        this.name = name;
    }
    this.sayName = function(){
        alert(this.name);
    }
}
module.exports= hello;

//main.js
var hello = require('./hello.js');
var o = new hello();
o.setName('張三');
o.sayName(); // 張三

模組初始化

一個模組中的JS程式碼僅在模組第一次被使用時執行一次，並在執行過程中初始化模組的匯出物件。之後，快取起來的匯出物件被重複利用。

模組載入優先順序

模組載入優先順序：已經快取模組 > 原生模組 > 檔案模組 > 從檔案載入

Node.js 的 require方法中的檔案查詢策略如下： 由於Node.js中存在4類模組（原生模組和3種檔案模組），儘管require方法極其簡單，但是內部的載入卻是十分複雜的，其載入優先順序也各自不同。如下圖所

模組路徑解析規則

1. 內建模組
   如果傳遞給require函式的是NodeJS內建模組名稱，不做路徑解析，直接返回內部模組的匯出物件，例如require('fs')。

2. node_modules目錄
   NodeJS定義了一個特殊的node_modules目錄用於存放模組。例如某個模組的絕對路徑是/home/user/hello.js，在該模組中使用require('foo/bar')方式載入模組時，則NodeJS依次嘗試使用以下路徑。

/home/user/node_modules/foo/bar
/home/node_modules/foo/bar
/node_modules/foo/bar

主模組

透過命令列引數傳遞給NodeJS以啟動程式的模組被稱為主模組。主模組負責排程組成整個程式的其它模組完成工作。例如透過以下命令啟動程式時，main.js就是主模組。

NPM應用

什麼是NPM

Node 成功的主要因素之一是它廣受歡迎的軟體包管理器——npm，因為 npm 使 JavaScript 開發人員可以快速方便地共享軟體包

npm（“Node 包管理器”）是 JavaScript 執行時 Node.js 的預設程式包管理器。
Node Packaged Modules 簡稱

Node本身提供了一些基本API模組，但是這些基本模組難以滿足開發者需求。Node需要透過使用NPM來管理開發者自我研發的一些模組，並使其能夠共用與其他開發者

npm 由兩個主要部分組成:

. 用於釋出和下載程式包的 CLI（命令列介面）工具

. 託管 JavaScript 程式包的 線上儲存庫

為了更直觀地解釋，我們可以將儲存庫 npmjs.com 視為一個物流集散中心，該中心從賣方（npm 包裹的作者）那裡接收貨物的包裹，並將這些貨物分發給買方（npm 包裹的使用者）。

為了促進此過程，npmjs.com 物流集散中心僱用了一群勤勞的袋熊（npm CLI），他們將被分配給每個 npmjs.com 使用者作為私人助理。 因此，dependencies（依賴項）會如下傳遞給 JavaScript 開發人員：

釋出 JS 軟體包的過程如下：

NPM使用

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS程式碼部署上的很多問題，常見的使用場景有以下幾種：

1. 允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
2. 允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。
3. 允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。

由於新版的nodejs已經整合了npm，所以之前npm也一併安裝好了。同樣可以透過輸入

 npm -v

來測試是否成功安裝。命令如下，出現版本提示表示安裝成功:

$ npm -version
9.5.1

升級更新NPM

$ sudo npm install npm -g

使用NPM安裝模組

有一個簡單安裝任何Node.js模組，語法如下：

$ npm install <Module Name>

例如，下面是安裝一個著名的Node.jsweb框架模組的命令叫 express:

$ npm install express

現在，你可以在js檔案中使用此模組如下：

var express = require('express');

全域性安裝VS本地安裝

本地安裝 預設情況下，NPM安裝指定包預設會安裝到本地。本地安裝指的是包安裝在當前目錄中node_modules資料夾中。本地安裝的包都可以透過require()方法進行訪問。例如我們安裝Express模組:

$ npm install express

列出所有本地安裝的模組

$ npm ls

全域性安裝 全域性安裝包都儲存在系統目錄中。我們可以在nodejs的CLI(命令列介面)使用，但是不能直接使用require()方法進行訪問。例如安裝http-server包：

//全域性安裝 -g
$ npm install -g http-server
//使用node CLI  
$ http-server

解除安裝模組

使用下面的命令解除安裝Node.js模組

npm uninstall express

更新模組

npm update express

搜尋模組

搜尋使用NPM包名

npm search express

下載三方包

NPM建立了一個NodeJS生態圈，NodeJS開發者和使用者可以在裡邊互通有無。

當你需要下載第三方包時,首先要知道有哪些包可用。npmjs.com提供了可以根據包名來搜尋的平臺，但是如果不知道包名可以百度一下。知道了包名後，就可以使用命令去安裝了，例如：Express

npm install express

下載完成之後，express包就放在了工程目錄下的node_modules目錄中，在程式碼中只需要透過reuqire('express')的方式去引用，無需指定包路徑。
以上命令預設下載最新版本第三方包，如果要下載指定版本，可以在包名後面追加@,例如透過如下命令可以下載0.0.1版本的express。

npm install express@0.0.1

如果使用到的第三方包比較多，在終端下一個包一條命令的安裝非常不方便，因此NPM對package.json的欄位做了擴充套件，允許在其中新增三方包依賴。

{
    "name":"test",
    "main":"./lib/main.js",
    "dependencies":{
        "http-server":"3.2.1"
    }
}

這樣處理後，在工程目錄下就可以使用npm install命令批次安裝三包了。最重要的是，當以後吧test專案上傳到了NPM伺服器，別人下載這個包時，NPM會根據包中宣告的三方依賴包進行自動下載依賴。這樣使用者只需要關心要使用的包，不用管其依賴的三方包。

給NPM伺服器釋出自己的包

第一次使用NPM釋出自己的包需要在npmjs.com註冊一個賬號

npm的常用命令

npm -v          #顯示版本，檢查npm 是否正確安裝。

npm install express   #安裝express模組

npm install -g express  #全域性安裝express模組

npm list         #列出已安裝模組

npm show express     #顯示模組詳情

npm update        #升級當前目錄下的專案的所有模組

npm update express    #升級當前目錄下的專案的指定模組

npm update -g express  #升級全域性安裝的express模組

npm uninstall express  #刪除指定的模組

NPM專案中運用

package.json

每個 JavaScript 專案（無論是 Node.js 還是瀏覽器應用程式）都可以被當作 npm 軟體包，並且透過 package.json 來描述專案和軟體包資訊。

我們可以將 package.json 視為快遞盒子上的運輸資訊。

當執行 npm init 初始化 JavaScript/Node.js 專案時，將生成 package.json 檔案，檔案內的內容(基本後設資料)由開發人員提供：

. name：JavaScript 專案或庫的名稱。

. version：專案的版本。通常，在應用程式開發中，由於沒有必要對開源庫進行版本控制，因此經常忽略這一塊。但是，仍可以用它來定義版本。

. description：專案的描述。

. license：專案的許可證。

npm scripts

package.json 還支援一個 scripts 屬性，可以把它當作在專案本地執行的命令列工具。例如，一個 npm 專案的 scripts部分可能看起來像這樣：

{
  "scripts": {
    "build": "tsc",
    "format": "prettier --write **/*.ts",
    "format-check": "prettier --check **/*.ts",
    "lint": "eslint src/**/*.ts",
    "pack": "ncc build",
    "test": "jest",
    "all": "npm run build && npm run format && npm run lint && npm run pack && npm test"
  }
}

eslint，prettier，ncc，jest 不是安裝為全域性可執行檔案，而是安裝在專案本地的 node_modules/.bin/ 中。

最新引入的 npx 使我們可以像在全域性安裝程式一樣執行這些 node_modules 專案作用域命令，方法是在其前面加上 npx ...（即npx prettier --write ** / *。ts）。

dependencies vs devDependencies

這兩個以鍵值物件的形式出現，其中 npm 庫的名稱為鍵，其語義格式版本為值。 大家可以看看 Github 的 TypeScript 操作模板中的示例：

{
  "dependencies": {
    "@actions/core": "^1.2.3",
    "@actions/github": "^2.1.1"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.0",
    "@typescript-eslint/parser": "^2.22.0",
    "@zeit/ncc": "^0.21.1",
    "eslint": "^6.8.0",
    "eslint-plugin-github": "^3.4.1",
    "eslint-plugin-jest": "^23.8.2",
    "jest": "^25.1.0",
    "jest-circus": "^25.1.0",
    "js-yaml": "^3.13.1",
    "prettier": "^1.19.1",
    "ts-jest": "^25.2.1",
    "typescript": "^3.8.3"
  }
}

這些依賴透過帶有 --save 或 --save-dev 標誌的 npm install 命令安裝。 它們分別用於生產和開發/測試環境

. ^：表示最新的次版本，例如， ^1.0.4 可能會安裝主版本系列 1 的最新次版本 1.3.0。

. 〜：表示最新的補丁程式版本，與 ^ 類似， 〜1.0.4 可能會安裝次版本系列 1.0 的最新次版本1.0.7。

所有這些確切的軟體包版本都將記錄在 package-lock.json 檔案中。

package-lock.json

該檔案描述了 npm JavaScript 專案中使用的依賴項的確切版本。如果 package.json 是通用的描述性標籤，則 package-lock.json 是成分表。

就像我們通常不會讀取食品包裝袋上的成分表（除非你太無聊或需要知道）一樣，package-lock.json 並不會被開發人員一行一行進行讀取。

package-lock.json 通常是由 npm install 命令生成的，也可以由我們的 NPM CLI 工具讀取，以確保使用 npm ci 複製專案的構建環境。

各種前端專案構建build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch…… 前端目前有很多很多名詞，看著這些感覺永遠也學不完。 不要被這些名詞嚇唬住，這些工具出現的目的是讓我們的工作更加簡單。

快速掌握build工具秘訣

快速掌握這些工具，抓住幾個核心概念：

1.幫助你安裝

2.幫助你做事

當你接觸到一個新的開發工具的時候，你首先需要搞清楚一個東西：“這個工具的目的是幫我安裝東西，還是幫我做事？”

安裝類的工具

npm、Bower和Yeoman幾乎什麼東西都能裝，它們可以用來安裝前端庫，例如Angular.js或是React.js。它們還可以為你的開發環境安裝伺服器。它們可以安裝測試庫。它們甚至可以幫你安裝其他的前端開發工具。

做事類的工具

Grunt、Webpack、Require.js、Brunchu和Gulp則更加複雜一點。這類工具的目標，是在web開發中幫你完成自動化。有的時候，這類工具所做的事情，被稱為“任務（task）”

為了完成這些任務，這類工具經常需要自己的包和外掛生態。每一個工具都會使用不同的方式來完成任務。這些工具所做的事情也不盡相同。一些工具，擅長處理那些你所指定的任務，例如Grunt和Gulp等工具。還有一些工具，只只專注於一件事情，例如處理JavaScript的依賴，例如Browserify和Require.js等工具。

build工具的“祖宗”是Node和npm

Node和npm負責安裝和執行所有這些工具，因此你的所有專案中都會有它們的身影。由於這個原因，很多開發者在安裝新的工具之前，都會盡可能的嘗試使用這兩個工具解決問題。

它們兩個一個負責安裝，一個負責幫你做事情。

. Node是做事工具

. npm則是安裝工具

npm可以安裝Angular.js和React.js等庫。它還可以安裝伺服器，讓你的應用在開發階段可以在本地執行。它還可以安裝很多其他工具，幫你完成很多事情，例如簡化程式碼。

而Node，則是幫你完成事情的，例如執行JavaScript檔案，以及伺服器等。

如果你剛剛開始學習，那麼Node和npm都是必學的東西。隨著你的專案不斷豐富，你將會逐漸知道這兩個工具的極限能力。當它們無法滿足你的需要的時候，就是你需要開始安裝其他工具的時候了。

build其實就是production-ready版本的應用

開發者經常會把JavaScript和CSS拆分成獨立的檔案。

獨立檔案的好處，是讓你可以專注於編寫針對性較強的程式碼，讓每一部分程式碼只針對一個問題，以免日後程式碼多到讓你自己都難以管理。但是當你的應用準備好被推向市場的時候，專案記憶體在多個JavaScript或是CSS檔案並不是一個好主意。當使用者訪問你的網站的時候，每一個檔案都需要獨立的HTTP請求，這會讓站點載入速度下降。

解決方法就是，給專案建立“build”，它要將所有CSS檔案合併成一個檔案，然後再合併JavaScript檔案。這樣一來，你就可以將檔案完成最小化。要想建立這個build，你需要使用build工具。

最正確工具組合”這麼個東西不存在

使用哪些工具，完全是你自己說了算的事情。

你也可以選擇什麼工具都不用。但是要記住，隨著專案的發展，複製、黏貼、整合、開啟伺服器等事情會讓你慢慢手忙腳亂起來。

你也可以只使用Node和npm，其他工具一概不用。對於新手來說，這種方式很好，但是和上一條一樣，慢慢你會開始感到力不從心。

或者，除了Node和npm之外，你也可以使用少數幾個其他工具。那麼，你的開發過程將會以Node和npm為核心，然後搭配Grunt和Bower，或是Webpack或是Gulp和Bower。

使用正確的工具，能夠幫你將很多繁瑣的事情實現自動化。但是使用工具的代價，就是你需要付出學習成本。

build工具學習成本較高，因此你只需要學習你用的上的工具

專案開發本身就已經很複雜了，你可能要使用新的語言或是框架。你可能需要應付複雜的業務邏輯。而引入新的工具，只會讓你的學習成本變得更高。

對此，我的建議是，只學習那些你用的上的工具，其他的就先緩一緩吧。

學習任何一種新東西，最好的方式就是進行實踐。例如，不要為了學習Grunt而去學習，你可以在你的專案中去嘗試運用。

如果你覺得對您有幫助關注公眾號，程式設計師三時 我會給大家不定期分享熱門技術，做開源專案，技術交流，面試，學習，分享自己入行多年一些感受和經驗

參考

什麼是 npm