現在前端的入門門檻越來越高了，不再是單純 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成為軟體架構師的首選的重要特征：

異步和事件驅動的Node.js庫- 所有API都是異步非阻塞的，這意味著Node.js服務器不必等待API回傳資料，它可以立即移動到下一個API呼叫，利用Node.js事件通知機制來獲取從API呼叫獲得的回應，這種異步的事件驅動機制，使得服務器可以高效地回應并快速處理大量請求，
非常快的Node.js代碼執行- Node.js代碼在谷歌Chrome的V8 JavaScript引擎上運行，速度非常快，
單執行緒但高度可擴展的Node.js - Node.js使用事件回圈單執行緒模型，事件機制有助于服務器以非阻塞的方式回應請求，這使得服務器具備高度可擴展性，相比傳統服務器使用創建執行緒等方式來處理請求，Node.js使用單執行緒和單一程式處理方式，能夠更好地處理大量請求，并具備更高的可擴展性，例如，Node.js可以比傳統的Apache HTTP服務器處理更多請求，
無緩沖的Node.js應用 - Node.js應用程式從來不需要緩沖任何資料，這些應用程式只需輸出塊中的資料，不需要在記憶體中緩沖大量資料，

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

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

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

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

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

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

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

常用框架

express:完善、出現早、檔案全、社區大
koa:超前，完善中
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 構建，

主要特點包括：

?? 跨平臺支持，包括：macOS、Windows、Linux；
? 單一檔案，輕松安裝，即時啟動；
?? 以速度為設計理念；
?? 適用于 .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方法接受以下幾種引數的傳遞：

http、fs、path等，原生模塊，
./mod或../mod，相對路徑的檔案模塊，
/pathtomodule/mod，絕對路徑的檔案模塊，
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 = https://www.cnblogs.com/kenx/archive/2023/05/08/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方法極其簡單，但是內部的加載卻是十分復雜的，其加載優先級也各自不同，如下圖所

模塊路徑決議規則

內置模塊
如果傳遞給require函式的是NodeJS內置模塊名稱，不做路徑決議，直接回傳內部模塊的匯出物件，例如require('fs')，
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代碼部署上的很多問題，常見的使用場景有以下幾種：

允許用戶從NPM服務器下載別人撰寫的第三方包到本地使用，
允許用戶從NPM服務器下載并安裝別人撰寫的命令列程式到本地使用，
允許用戶將自己撰寫的包或命令列程式上傳到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 [email protected]

如果使用到的第三方包比較多，在終端下一個包一條命令的安裝非常不方便，因此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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551963.html

標籤：其他

上一篇：Marked.js讓您的檔案編輯更加輕松自如

下一篇：返回列表

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

什么是nodejs

NodeJS特性

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

常用框架

NodeJS下載安裝

管理Nodejs版本

n

nvm

fnm

Node.js模塊系統

模塊化編程

Node中模塊分類

模塊操作

require 加載模塊

exports 創建模塊

module

模塊初始化

模塊加載優先級

模塊路徑決議規則

主模塊

NPM應用

什么是NPM

NPM使用

使用NPM安裝模塊

全域安裝VS本地安裝

卸載模塊

更新模塊

搜索模塊

下載三方包

給NPM服務器發布自己的包

npm的常用命令

NPM專案中運用

package.json

npm scripts

dependencies vs devDependencies

package-lock.json

各種前端專案構建build工具

快速掌握build工具秘訣

安裝類的工具

做事類的工具

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

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

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

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