iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

試著學 Hexo系列 第 8

(8) 試著學 Hexo - 你應該懂基本的 npm 指令

  • 分享至 

  • xImage
  •  

前言

接下來認識一下有哪些是屬於必須認識的 npm 指令唷~

查看 npm 版本

基本上這個指令相對使用度是比較低的,但是如果你不幸遇到一些狀況以及錯誤時,就會需要這個偉大的指令,因為你需要提供你當前的 npm 版本以及錯誤訊息餵食 Google

npm -v

專案 npm 初始化

建立一個新專案時,建議你起手式一定要先輸入這個指令,只要你有想要安裝任何從 npm 下載的套件,那麼就一定要輸入,除非你想看 npm 噴錯誤訊息

npm init

而當你輸入 init 之後它會要求你輸入關於這個專案的相關資訊,如果你懶得輸入這些的話,你也可以直接輸入以下指令直接跳過這些流程,此時 npm 就會全部載入預設資料

npm init -y

除此之外 npm init 這個指令最主要是生成一個叫做 package.json 的檔案,而檔案會儲存我們從 npm 下載回來的套件名稱與版本。

只是我們在前面沒輸入是因為 Hexo 已經在建立專案過程已經幫我們準備好囉。

安裝套件

接下來講講安裝套件的部分,關於安裝套件其實也有很大的雷點,也就是關於「本機、本地安裝」以及「專案安裝」,這兩種安裝方式其實非常容易搞不清楚,所以這邊也來稍微介紹一下。

本地、本機安裝

前面章節其實我們已經有使用過「本機、本地安裝」(以下統稱本地安裝)的指令,也就是 npm install -g hexo-cli

而所謂的本地就是你的電腦,也就是將套件安裝在你的電腦上暫用你的記憶體空間,通常這種套件可以讓你直接在終端機上面直接輸入一些指令,例如 hexo sgulp deploy 等等,如果你沒有安裝這種套件的話,終端機是會噴它不認識這個指令的。

附帶一提 -g-global 的縮寫,而你要放在套件名稱前或後都可以,這一點並沒有硬性的規定

npm install -g hexo-cli
npm install hexo-cli -g

如果以我自己來講,我會習慣放在前面,這時候你應該會說你還是無法區分哪些套件是要本地安裝,那麼這時候就要請你張開眼睛看清楚官方文件,因為官方文件通常都會跟你說要輸入什麼指令。

專案安裝

接下來是專案安裝,專案安裝簡單來講就是只會將套件安裝在目前的專案上,我知道這一句話很像廢話,所以換另一種方式來解釋就是將套件安裝在當前專案的資料夾,注意這與安裝在本地上是不同的,這個套件會記錄在 package.json,因此套件會隨著專案(資料夾)的移動而轉移。

而將在安裝套件時,我們會輸入 --save 將套件資訊紀錄在 package.json,在前一篇文章中我們也有嘗試過相關指令

npm install hexo-generator-feed --save

當然你要放前放後都可以,這也沒有所謂的硬性規定。

附帶一提,安裝 npm 套件的時候它還有區分 dependenciesdevDependencies

dependencies (依賴套件)

npm install --save hexo-generator-feed

devDependencies (開發依賴套件)

npm install --save-dev hexo-generator-feed

那這兩種專案安裝的方式又有一點不同,簡單來講 dependencies 的套件就是在你專案 production or build 之後仍然會使用的套件,例如 jQuery、swiper 等等套件,因此我在專案開發完畢之後,仍然會在正式專案使用那麼就要安裝在 dependencies,反之 devDependencies 就是只有在我們開發時,才會使用的套件,舉例來講 babel、esling 等,這類型套件就只會在開發時使用。

但是實際上安裝套件時,官方文件大多都會說明,因此若真的不知道哪個是開發依賴套件或是依賴套件,那麼就會建議你直接通通塞到 dependencies,等到後面比較清楚兩者差異之後再來更改安裝模式也是可以的。

移除套件

移除套件就比較沒什麼好講的,反正就是 npm uninstall [套件名稱] 就可以移除囉。

但是如果你是移除本機的套件,那就要記得加上 -g

npm uninstall -g [套件名稱]

還原專案套件

最後一個就是還原套件,前面有講到 npm 下載套件到專案之後都會將相關套件名稱與版本號儲存在 package.json 而套件實際會暫存在 node_modules 資料夾,而這個資料夾通常會很肥大,小至好幾 MB,大至破 GB 都有可能。

https://ithelp.ithome.com.tw/upload/images/20200917/201194868M3fMil54R.png

因此我們將專案轉移或者是換電腦開發時,並不會將 node_modules 加入版本控制或者是上傳,如果你將 node_modules 加入版本控制或是跟著原始碼一起上傳,那就有很高的機會發生錯誤而導致無法運作,因為 npm 在安裝套件時,也會針對作業系統去安裝相關套件,因此 node_modules 是會被忽略上傳的。

那 node_modules 不能加入版本控制以及上傳,這樣我們轉移專案時,該如何還原套件?

這個時候我們就會仰賴 package.json 來還原相關套件,並且在還原專案套件時,會輸入一個語法也就是是般若波羅蜜...

https://ithelp.ithome.com.tw/upload/images/20200921/20119486LPX27JeBiC.jpg

啊...不是,是 npm install,這樣你就可以看到熟悉的 node_modules 回來佔用你的電腦記憶體空間並且專案也可以正常運作哩。

額外的補充文章

最後的最後這邊額外補充一些我先前寫的 npm 指令介紹


上一篇
(7) 試著學 Hexo - 如何安裝插件
下一篇
(9) 試著學 Hexo - 圖片空間的挑選
系列文
試著學 Hexo33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言