學習目標:了解 node.js 及 npm 是什麼
Node.js
第一次聽到 Node.js 時以為是什麼函式庫(library),後來到 官網 只寫了一句:
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
看不懂是什麼也不 Google(揍
就先下載再說,接著就開始無腦下一步安裝,安裝完後就….恩?所以咧?
.
.
就結束了我與 Node.js 第一次相遇😢。
Node.js 是什麼
- 是能夠執行 JavaScript 的一個運行環境
那什麼是執行 JavaScript 的運行環境?
「瀏覽器」是一個能夠運行 JavaScript 的運行環境,在 Node.js 出世以前 JavaScript 「只能」在瀏覽器上運行。
所以 Node.js = 運行環境
能讓 JavaScript 跑在瀏覽器以外(例如:電腦)。我們再回到安裝這件事情,我已經安裝好 Node.js 了,但我要在哪裡輸入 JavaScript 呢?
哪裡可以與電腦溝通呢?
Command Line 阿!!!
所以安裝好 Node.js 後就可以在終端機內輸入 JavaScript 語法並且運行。
$ node -vv12.16.1
#出現版本號就代表安裝好囉 🎉
關於 Mac OS X 的 Command Line 基本教學可參考:[第一週] Command Line 基本指令與操作
[補充說明] windows 的環境可以多下載 cmder 作為終端機使用。Q:為何要下載?
A:因為 windows 的指令與 Mac OS X 不大相同,因此這個軟體能夠讓你可以的終端機變成 Mac OS X 終端機。
瀏覽器與 Node.js 兩者在運行 JavaScript 上的差異
npm(Node Package Manager)
在終端機輸入 npm -v
會出現版本號,在安裝 node.js 時就會一起將安裝好 npm
npm 是什麼
是一個 node.js 的第三方外掛,用來管理函式庫的工具。
以前我們想用一些套件,例如:jQuery、select2 等函式庫,大概是這樣的流程:去官網下載 zip 檔 ➡️ 解壓縮 ➡️ 檔案放入專案資料夾 ➡️ 在 html 引用。
如果有 10 套件要裝呢?有沒有更快的方法?
這時候 npm 就派上用場了,他的好處在於:
- 統一管理函式庫(更新、下載、刪除)。
- 可以使用別人寫好的函式庫(程式)。
引入: npm init
- step1. 建立專案資料夾:
$ mkdir npmTest && cd npmTest
- step2. 引用 npm:
$ npm init
接著會跳出一些資訊要輸入,先全部按 enter
管理本地安裝 npm 包:package.json
- 用來紀錄專案資訊,所以也包含了函式庫資訊。
- 別人也可以透過這個檔案去知道使用了哪些函式庫並下載安裝
使用 npm 下載函式庫 : npm install
如何找到需要的函式庫
- 方法一、至 官網 搜尋 #線上資料庫
- 方法二、終端機輸入指令
$ npm search <library-name>
新增函式庫 npm install
- 安裝函式庫:
$ npm install <library-name>
- 把參數回傳到資料庫去搜索,並將搜索到的資料下載回來。
- 舉例:
$ npm install jquery
- 變化型
1. 增加套件資訊:$ npm install -save <library-name>
#npm 5 以後以變預設
2. 如果後方沒有加上函式庫的名稱,就會依據 package.json 上的記錄將所有的函式進行安裝
[補充說明] 錯誤訊息:Refusing to install package with name "<name>" under a package代表 package.json 中 name 的值與套件名稱衝突,只要將 name 的值更改掉就可以了
確認函式庫已新增
到專案資料夾…
[補充說明]版本號中的向上標號 ^ 意思是定義了向「後(新)」兼容依賴。假設我今天下載的版本是 3.4.1,但可能明天開發者發佈了 bug 的修復,因此最新版本變成了 3.4.2,當重新 install 時只要發布 3.4.1 以上版本將會自動更新。
npm 建立的檔案與資料夾
除了 package.json 會發現還有 node_modules 及 package-lock.json,以下就來說明一下這兩個東西的功能:
node_modules
- 所有下載的函式庫都會放在這個資料夾
[補充說明] 為什麼 node_modules 內有其他函式庫?代表 install 函式庫需要依賴其他函式庫運行, npm 發現沒有,他就會很聰明的自動幫忙一起下載回來。
package-lock.json
- 用來紀錄「第一次」 install 函式庫的資訊。
- 剛剛有提到
$ npm install
會跟著 package.json 函式庫資訊進行安裝,而 package.json 函式庫資訊定義了向後(新)兼容依賴,因此若有人在 git hub 上 clone 了專案並運行$ npm install
,可能會得到與原專案不同的函式庫版本,導致專案一下爆這個一下爆那個,在這時 package-lock.json 就起了很大的作用,可以根據這個檔案查看當時開發者所使用的版本去下載函式庫,才不會造成 bug 產生。