Web開發學習筆記18 — 開始使用Node.js、npm


Posted by Teagan Hsu on 2021-01-08

什麼是Node.js?

簡單來說,Node.js就是能夠在伺服器端運行JavaScript的開放原始碼。我們用JavaScript開發網頁時,並沒有安裝什麼軟體就可以運行程式是因為瀏覽器幫我們實現了程式的運行,換而言之,Node.js會缺少一些客戶端有的語法,像是DOM或Event,但能夠在伺服器端運行的Node.js也多了很多其他的功能。

Node.js可以做到什麼?

  • Web Server
  • Command Line Tools
  • Native Apps(例如:VSCode)
    .
    .
    .

創立一個自動化資料夾

運用node.js和terminal寫出一個可以自動化建立資料夾,並附帶index.htmlstyle.cssapp.js三個檔案。

const fs = require('fs');  //fs要先require
const folderName = process.argv[2] || 'Project' //default名字
try {
    fs.mkdirSync(folderName);
    fs.writeFileSync(`${folderName}/index.html`, ""); //要輸入第二參數
    fs.writeFileSync(`${folderName}/style.css`, ""); //要輸入第二參數
    fs.writeFileSync(`${folderName}/app.js`, ""); //要輸入第二參數
} catch (e) {
    console.log(e);
}

module與module.exports

在node.js裡每一個JavaScript檔案都會被看成一個獨立module(模組),如果想要導出給其他模組使用,就必須使用module.exports與require。使用module.exports把模板導出,最後會再用require引入模板。
範例:

//math.js
const pi = (3.14)

const add = function(x, y) {
    return x + y;
}
const square = function(x) {
    return x * x;
}

module.exports.pi = pi;   //導出模板
module.exports.add = add;
module.exports.square = square;

//app.js
let math = require('./object.js');  //引入模板
console.log(math.pi);
console.log(math.square(8));
console.log(math.add(2, 3));

//app.js也可以寫成這樣:
let {pi, add, square} = require('./object.js');  //在此層資料夾中/引入模板
console.log(pi);
console.log(square(8));
console.log(add(2, 3));

或是寫成這樣更簡潔:

//math.js
let math = {
    pi: 3.14,
    add: function(x, y) {
        return x + y;
    },
    square: function(x) {
        return x * x;
    }
}

module.exports = math;

結果:

module.exports與exports

exports其實就是module.exports的縮短寫法(shortcut),參照node.js官網
但要注意一點,不要把exports當成變數亂改,因為會照成module.exports指向錯誤。
正常狀況:

//text.js
let text = "Hello"
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //Hello

改到exports的值:

//text.js
let text = "Hello"
exports = {}   //把module.exports指向空物件
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //undefined

解決辦法:

let text = "Hello"
exports = {} = module.exports  //把exports重新指回module.exports
exports.text = text

//app.js
let { text } = require('./object.js');
console.log(text);   //undefined

什麼是npm?

nmp(Node Package Manager)是一個軟體套件管理系統,可以下載許多Javascript套件來使用。

開始使用npm

安裝npm

node.js在0.6.3版本開始內建npm,所以先裝node.js後可以不用另外再裝npm。
官網下載node.js
下載好node.js可以用npm -v檢查當前npm版本:

建立package.json

在開始安裝套件使用前,我們需要先為專業建立一個檔案:package.json,要建立package.json很簡單,在Terminal上打上npm init,沒有特殊要求就先一直enter下去。

  • git repository:
    • 先在github開一個新的專案,再將url輸入進去

安裝套件

在terminal輸入npm install [套件名稱]或是npm i [套件名稱]。或許會看到還有這種寫法:npm install [套件名稱] --save,不過自從npm 5.0.0版本後--save就變成預設了,所以不用另外寫,也可以將新增的套件名稱加在package.json檔案中的dependencies欄位。
(dependencies代表我們在此專案用到的套件們有哪些):

建立.gitignore

當我們要同步到GitHub前(也就是push repository前),記得先要建立.gitignore,
它可以幫我們擋住很多不需要push的檔案,像是node_modules,這在網上都找得到資料,就不需要push上去了。

要如何建立.gitignore?

可以使用Github上的內建功能,建立新專案時順便建立.gitignore

點開.gitignore檔案可以看到它已經幫我們把要擋住的一些檔名加上去了:

有其他想隱藏的檔案,可以再手動加上去!


有了.gitignore後node_modules就不會被推進repository了,像這樣:

用packge.json把node_modules載回來

今天我們想換一台電腦繼續做專案時,可以這樣做:

  1. 去github把檔案載回來
  2. 在terminal輸入npm installnpm i
  3. 想要移除套件時,輸入npm uninstall [套件名稱]
  4. 可以看到移除套件時,也順便把package.json裡的dependencies欄位更新了:

參考資料:
export 跟module exports 有什麼差異?
node.js 中 module.exports 及 exports 的差異及區別
從零開始: 使用NPM套件


#node.js #module #module.exports







Related Posts

Jest - mock read-only data

Jest - mock read-only data

簡明程式解題入門 - 陣列篇 III

簡明程式解題入門 - 陣列篇 III

CSS 衍生的資安問題(中) - 不用 Hot Update 也行

CSS 衍生的資安問題(中) - 不用 Hot Update 也行


Comments