iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
2
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 4

【D4 - npm 你到底是誰】大家都叫我npm install!! 但這甚麼意思

我: 沒想到這麼多人敲碗想要看到你ㄟ~
npm: 那是當然的吧,大家都會用到我啊
我: 可是好像沒人知道你到底是啥...

前言

npm 全名是 node package manager,就是套件管理工具~ 比較常用的除了npm 之外還有 yarn (雖然現在兩者之間差異沒這麼大了,但你還是可以選擇你看順眼的) 那好啦! 甚麼是套件??

套件

套件其實就是一個形容詞,形容非原生的、其他人開放的原始碼,你可以想像成它是一個零件,可以一個一個慢慢地拼湊出完整的機器。其實會有套件的出現很容易懂,前端是一個集合名詞,他之所以這麼多功能*(肥大)* 就是因為他是許多人一起開發出來的心血集合,所以除非你就是只想用 HTML/CSS/JS開發,不論是框架、後端、資料庫等等都還是需要下載的「套件」

套件管理工具

我想一下怎麼解釋這甚麼
.
.
.
管理...套件的...工具??
其實就真的是字面上的意思,你需要一個工具讓你可以輕易地下載這些外部開發程式,例如要下載vue 就要 npm install vue, nodejs 的 npm 和 facebook的 yarn 就是目前前端比較著名套件管理工具。


npm使用手冊

現在各位可以打開你的terminal,輸入npm install~
神奇的事情發生了!!
你的terminal 會出現

ERROR:
npm is not recognized as internal or external command, operable program or batch file

原因很簡單~ 就是因為各位還沒下載node, 電腦也無法識別npm到底是甚麼意思XD 所以請先跟者我setup 一下~

  1. 下載Node.JS
  2. 注意一下它安裝的位置~
  3. 你下再了node, 代表也同時下載了npm,但是電腦還是不知道npm是啥! 所以我們要教導可愛的電腦
  4. 打開這個東西~ 輸入path 或路徑應該就會有了
    https://ithelp.ithome.com.tw/upload/images/20200904/20129730O0YqzOEBl7.jpg
  5. 接下來選擇進階 --> 然後選擇環境變數
    https://ithelp.ithome.com.tw/upload/images/20200904/201297309ueEK90KwV.jpg
  6. 然後上面那個box裡面有一個PATH,點選之後按edit 編輯
    https://ithelp.ithome.com.tw/upload/images/20200904/20129730DYIt7r1KMc.jpg
  7. 新增 C:\Program Files\nodejs\到路徑裡面 (告訴電腦我打npm就是要去者裡面找資料)
    https://ithelp.ithome.com.tw/upload/images/20200904/20129730lpE3qGtxQX.jpg

接下來可以重開機~ 就有辦法使用這個強大的套件管理工具囉~


那請問npm install到底是甚麼?

npm install 這個指令其實會下載兩樣東西~ 首先是這個package(套件)本身,再來就是他的dependency。
npm install 後面可以加上其他指令,但也可以直接打出來~ 接下來就示範一下npm install 到底下載了甚麼東西,dependency又是甚麼?

  1. 打開terminal --> 選擇 (cd)到一個喜歡的位置
  2. 輸入npm install 接下來你會看到一個東西
    https://ithelp.ithome.com.tw/upload/images/20200904/20129730SES5nVbhKY.jpg
    上面顯示 沒有找到 package.json ~
    這意味著npm install 就是在你這個資料夾裡面去尋找 package.json這個檔案並去下載裡面所定義的所有dependencies

再做一次

我已經再github上面 https://github.com/ryanyen2/30days-challange
做了一個vue檔案你可以先

  1. git fork 到自己的github裡面
  2. 然後 git clone 到自己電腦
  3. 接下來你就會看到有 package.json這個檔案
  4. 再來就直接 npm install

package.json

https://ithelp.ithome.com.tw/upload/images/20200904/20129730cLoVb66UcU.jpg
你可以看到dependencies裡面有一個東西叫做 vue 就是因為他使用了vue這個套件,那vue這個套件有甚麼功能呢,他已經幫你把modules都下載好放在 node_modules裡面了,基本上開發時不需要去動到node_modules但是如果你想客製化這些套件就可以去node_module裡面管理~

package.lock.json

眼尖的朋友一訂有注意到還有一個 package.lock.json 這個檔案是他自己自生成的,裡面會描述了你下載的dependency tree,方便接下來的安裝可以順著這些樹枝~ 所以只有第一次npm install才會花這麼多時間~


npm run serve

npm run serve 照著字面的意思就是要跑出一個server,就是說 : 「npm 你可以幫我跑一下我在package.json, serve 這個名子底下定義的指令嗎?」

  1. 打開terminal
  2. cd到你剛剛下載的那個30days-challange
  3. npm run serve 就可以跑出這個畫面
    https://ithelp.ithome.com.tw/upload/images/20200904/20129730ZdDVAmz4Nb.jpg

然後你就照著他上面跟你說的 app is running at: localhost.... 把那個 http://localhost:8.../複製下來丟到瀏覽器上~ 就可以看到一個這個網頁囉~
https://ithelp.ithome.com.tw/upload/images/20200904/20129730rqAKuirdBu.jpg

(但要注意~ localhost是指說你在自己的電腦上才能跑出來,所以他不是真正的網址喔~ 只是讓你能先看看網站會長甚麼樣子)


後記~

基本上 npm 還有很多功能~ 你也可以在npm install後面加上更多指令~
我這邊不會細細解釋每一個npm 指令。但這次最主要會用到的兩大功能npm installnpm run serve 一定要先試試看怎麼去做!


上一篇
【D3 - 主委加碼】版本控制 -- Git
下一篇
【D5 - 前端基本功】前端三大語言 -- HTML
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
helpme1111
iT邦新手 5 級 ‧ 2022-09-06 14:46:56

https://ithelp.ithome.com.tw/upload/images/20220906/20145353N4G8ufEhow.png

請問下載好github的檔案後,有指定要放在哪一個資料夾嗎?
https://ithelp.ithome.com.tw/upload/images/20220906/20145353yA2xWouB20.png

ryanyen2 iT邦新手 5 級 ‧ 2022-09-13 15:40:02 檢舉

你要先 cd 進去 30days... 那個folder 再npm install 喔~

我要留言

立即登入留言