iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

不用去柬埔寨也能活摘 Vue系列 第 5

[Vue] Day5 認識 Node.js 及 npm

  • 分享至 

  • xImage
  •  

來囉來囉 ~ 恭喜我們進入第五天的旅程啦 ~ 可喜可賀 ~ 恭喜發財 ~
小妹我呢,今天準備要來介紹的就是開發環境拉,是不是已經有人猜到了 (=゚ω゚)ノ

那首先,要跟大家分享的就是我所使用的開發環境,沒錯!就是 VS Code
也是第二天跟各位介紹的,還沒下載 VS Code 及套件的你,趕快回憶一下
來!傳送門也都幫你建好了,點下去就對了 ----> VS Code 安裝及前端套件介紹

什麼!有人說套件太少,不夠安裝嗎 @@???
/images/emoticon/emoticon04.gif
ヽ(ˋД´)ノ
沒關係,幸虧我早有準備,要多少有多少,給 ----> VS Code 前端補充套件
終於可以了是吧,那接下來,就讓我來為各位介紹使用 Vue 所需要的開發環境了

node.js

最先登場的就是我們的 node.js 拉!「node.js」是什麼呢?

對於在前端長大的你們來說,對 JavaScript 肯定是不陌生的,而 JavaScript 是非常需要依賴瀏覽器才能執行的程式語言,導致在追求效率的同時,我們也需要寫一個網頁。

而 node.js 不同,他是可以完全獨立在我們的程式環境中,不去依賴其他伺服器,使開發者可以完全掌控整個伺服器的運作過程,也可以創造出更多的點子。

JavaScript 是能在瀏覽器的 JavaScript 引擎上執行,而 Node.js 也能在 JavaScript 的環境執行, V8 則是能在主流瀏覽器 - Google Chrome 的 JavaScript 引擎中,負責解析、執行 JavaScript ,也就去實踐 ECMAScript 規範中定義的部份。

而 Node.js 是以 V8 為核心,配合一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript!

看到這裡,相信大家對於 node.js 已有初步的了解了呢,那接下來我們就來看看 node.js 有甚麼功能吧!

node.js 功能

上述有跟各位介紹到,Node.js 可以執行 JavaScript 的環境,而我們所說的這個環境除了可以提供瀏覽器 Web API 能實作的 setTimeout、setInterval、console 外,也因為執行環境有差異,另可以提供一系列的 API 給開發者做使用,如:可以讀寫檔案的 fs、處理網路請求的 http、做加解密雜湊處理的 crypto、設定叢集的 cluster 等等的功能。

而在這個程式語言盛行的時代中,相信對各位來說,使用開放原始碼的套件輔助我們做開發,已經是一件在稀鬆平常不過的事情了,無論是透過套件去加速我們打 Code 的效率,或是在開發環境中加上可以輔助我們的各式工具,只要稍做設定,就能讓一個專案輕鬆加載成千上萬的外部程式,但你有想過嗎?如此方便的機制是怎麼去實現的呢?

接下來就和大家介紹這個可以幫我們實現機制的 npm 吧!

套件管理工具 NPM

npm 的縮寫是「Node Package Manager」,而中文直翻的話就是 Node 包管理工具。

開發者也可以透過 node 所隨附的 npm cli 去進行套件的安裝及管理。例如我們在專案資料的終端機中輸入 npm install express,則會讓 npm 自動從 Registry 中尋找 express 的這個 Node.js Web Server 框架,並取得最新版本,將它下載到專案中的 node_modules 資料夾。

而在專案中,我們無法每次都能透過開發者去自行指定套件安裝,不僅不易管理,操作起來也非常沒有效率。而只需要在安裝時去 npm install,開發者就能透過專案中的 package.json 去有條理地列出我們本次的專案需要哪些套件,npm 就能自動依據其內容去輔助我們下載套件,這樣聽起來是不是非常方便好用呢 (>^ω^<)

那麼我們就來看看 npm 的重要功能吧!

模塊倉庫 ( Registry )

在 npm 中有各式各樣的模塊,因為是讓用戶通過 npm 把自己設計的模塊放上去,導致安全及不安全的模塊混雜在其中,而在我們需要使用的時候,可以通過 npm 的指令去安裝指定的模塊,裡面都會包含一個 JSON 格式的元件,而在 node.js 的模塊中就會有內置模塊了,例如我們很常使用的 fs 與 http 的模塊!

var fs = require ("fs");
var http = require ("http");

如上方程式碼,可以直接透過 require 去導入我們的模塊,也可以使用 npm require 的第三方模塊,幫我們在內置模塊中找不到我們想要的,這時候就可以透過模塊倉庫去查詢,並下載到自己的本機,非常的方便呢!

CLI命令列介面 ( Command Line Interface )

在 npm 中我們可以透過 CLI 命令列介面去下載、卸載或更新第三方模組。
如果想知道 npm CLI 是否有安裝成功,可以輸入指令 npm - v 去確認,如下圖就是有成功安裝呦!

如圖我們可以得知我所安裝的版本是 8.1.0。

當然,要安裝 npm 其實一點都不難喔!我們只需要安裝 Node.js,npm 就會跟著 node 這隻程式一起被安裝進去,因為 npm 本身就是基於 JavaScript 被開發出來的,而開發的目的當然就是想讓使用者更加方便的去管理並發布套件拉!

而我們如果到 npm 的官方可以看到 express 的下載量是非常驚人的
下一篇將會教大家如何下載 node.js ,成功安裝後將會帶大家實際安裝看看 express 喔!


好拉,那我們今天對於 node.js 與 npm 的介紹就到這邊結束啦。
明天就會與各位一起進入安裝/驗證及小小的實作呦,再請各位敬請期待!謝謝大家 <3
/images/emoticon/emoticon61.gif


上一篇
[Vue] Day4 前端框架介紹
下一篇
[Vue] Day6 Node.js 安裝教學及簡易實作
系列文
不用去柬埔寨也能活摘 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言