iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
Modern Web

從零開始遲來的Web開發筆記系列 第 10

NPM/PNPM的一些使用與理解(安裝Parcel爲例)

之後來說說除了Pug外的另外一個工具--Parcel。在正式提及前,先接著說npm。因爲之前完全沒提及npm相關的使用方式,所以這邊說說幾個我最常使用的命令。

使用npm安裝工具與套件

首先透過npm安裝工具,這和系統安裝軟體很像,不同的是你需要先把npm、node的所在位置,也就是Node.js的安裝位置加入環境變數PATH裏面,Windows的Node.js安裝軟體應該已經做完這件事情,所以要告訴你的是:這種安裝是把軟體安裝在那?在node.js的目錄下,並且用稱作全域安裝
使用方式是npm install --global <套件名稱>,像是我如果要安裝Parcel,就可以下命令npm install --global parcel-bundler,可以簡短成npm i -g parcel-bundler

npm同時也是一個專案管理套件,雖然這麼說還要看怎麼配置,所以不完全正確,但確實有部分功能使用於專案管理。在一個空的資料夾底下可以下npm init建立一個初始專案資料。會進入一個互動式的介面,並訊問一些問題:像是專案名稱、版本、作者等等資訊,並寫入一份package.json的檔案,這份檔案在Node.js相關應用開發上,可以說是非常重要。

本地安裝套件,或是區域安裝套件。相較於全域安裝,這通常是比較臨時,或是針對單一專案使用的安裝方式,應該也是最常被使用的方式,那就是把-g--globle去除掉,變成npm i parcel-bundler,那麼安裝
位置會變成在專案目錄下的一個名爲node_modules的目錄裏面。
package.json還負責記錄相關的依賴,有點像是CMake的CMakeLists.txt裡部分記錄的。不過做完上面步驟應該會發現package.json沒什麼變動,那是因爲在安裝時還需要加入--save-dev的參數,才會自動更新package.json。另外Save的模式也分成幾種,一個除了--save-dev外,另一個常用的是--save,沒記錯還有其他模式,可以透過npm help install去瞭解。這邊說下爲什麼parcel使用--save-dev因爲parcel和pug一樣是一個準備拿來使用的工具,而不是寫程式是要引入(import or require)的套件,所以是視作爲開發時(dev)的開發工具。

使用安裝好的工具

如果使用全域安裝,並且已經設定好相關環境變數,那麼應該可以直接使用parcel --version看看parcel是否安裝成功。如果是本地安裝...在早期版本比較麻煩,需要深入node_modules資料加尋找相對應的程式執行,而現在有npx的工具(還以爲不會說到它XD)。使用npx parcel --version執行使用安裝好的工具。npx會先從本地安裝搜尋,若找不到,會再全域安裝在找一次。

另外可以修改package.json檔案,在scripts裡加入加入而外的指令譬如:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "parcel-version": "parcel --version"
  },

如此就可以使用npm run parcel-version來查看parcel是否安裝成功。

npm外的相關工具

除了npm外,node.js安裝相關工具、套件還有其他類似於npm的工具。像是目前應該也已經廣泛被使用的Yarn,還有一個後起之秀pnpm。因爲目前pnpm相關的文章似乎還不多,所以就來輕點一下吧!

pnpm的速度

就先來看看pnpm上在Github中自己公佈的比較吧:

不只如此,pnpm也有與npm類似的設計,看看除了pnpm,還有個pnpx就之道了。

pnpm的安裝

安裝除了透過獨立下載curl -L https://unpkg.com/@pnpm/self-installer | node,還可以透過npm安裝npm install -g pnpm。透過pnpm自己升級pnpm install -g pnpm

pnpm與npm的高度相似,令在專案還不複雜時,可以先簡單使用npm。當逐漸發現建製環境變慢時,專案變複雜時,還可以無痛轉換到pnpm。

安裝parcel

官方說明的安裝方式有兩種:
透過Yarn
yarn global add parcel-bundler

或是透過npm
npm install -g parcel-bundler

當然你也可以透過pnpm。那麼使用npm相關的意義我也就不在重複說明了。透過npm安裝工具與套件也差不多到此即可。


意外的npm也寫了那麼多東西。parcel的使用就留到明天兒吧!再看了一次官方文件,似乎有多了不少說明呢~先讓我再來看看。


上一篇
我知道的Node.js那點小事
下一篇
CSS的@import
系列文
從零開始遲來的Web開發筆記30

尚未有邦友留言

立即登入留言