從模組化來看 npm


Posted by ai86109 on 2020-06-28

什麼是模組化?

試想現在你是一個購物網站的工程師,除了精美的頁面、商品之外,最重要的是他要來賣東西的對吧!所以他必須要導入會員登入、金流、會員管理等等系統,假設我們沒有模組的概念,把所有功能都寫在一起,看似很方便,但缺點就是會很難維護。一旦我們想要改動金流系統時,很可能就不小心動到登入的東西,而造成功能壞掉,所以比較好的做法是把他們都拆出來,拆成一塊一塊的,登入有登入的一塊,會員管理有會員管理的一塊,我們稱之為模組(module)

而在我們先前學會的 Node.js 中,就有內建的的模組可以使用。例如我想用 os 的功能,就把 os 用 require 帶入,想用什麼就把什麼 require 進來,十分容易。

var os = require(‘os’)
console.log(os.platform())

這樣我就可以使用 os 裡面的 platform 功能,使用內建的模組就是這樣簡單!

那我有辦法自己創造一個模組,甚至讓別人使用嗎?

可以。首先我先創一個想被引用的檔案,叫做 index2.js 好了。

@index2.js

function double(n) {
    return n * 2
}

module.exports = double

寫一個想被引用的 function 叫 double,並且使用 module.exports,使之可以被引用。
接著到想引用他的地方,假設是 index.js。

@index.js

var doubleNumber = require('./index2.js’)        //引用的檔案記得用 ’’ 包裹起來,./ 之後加你引用的檔案名(js 不加也可以被找到)

console.log(doubleNumber(3))

這樣便可以使用 double 這個 function 了。

  • 但其實剛剛 module.exports 後面不只可以帶 function,也可以帶其他東西像是 array, object 等。
  • 這邊 require 裡面帶的是路徑是因為這個引用的 module 是我們自己寫的,非程式內建。

上面說的是引用一個 function,那如果我想要引用很多怎麼辦?
可以利用物件包裹

@index2.js

function double(n){
    return n * 2
}

var obj = {
    double: double,
    triple: function(n){
        return n * 3
    }
}

module.exports = obj

這邊利用物件,將 double 和 triple 兩個 function 包起來 export。

@index.js

var myModule = require('./index2.js’)

console.log(myModule.double(3), myModule.triple(10))

這樣便可以使用多個 function。

除了把東西都放在 object 裡再帶入的方式外,還有另一種方法,也就是分別帶入。

@index2.js

function double(n){
    return n * 2
}

exports.double = double
exports.triple = function(n){
                return n * 3
            }

這樣方式帶入的,會自動形成 object 形式,有點像 exports 就是一個空物件的感覺。
可以理解成下面這樣

{
    double: double,
    triple: function(n){
                return n * 3
            }
}

以這樣的方式輸出,接收端的使用方式無異。

@index.js

var myModule = require('./index2.js’)

console.log(myModule.double(3), myModule.triple(10))

npm, node package manager

講了這麼久總算要來提到 npm 了,從剛剛這樣一路看下來,我們學會引入 Node.js 內建的 module,也學會自己寫出 module 使用,那我如果想要提供給別人或是使用其他人的有辦法嗎?

嗯,透過 npm

npm 的 n 就是 node,他是 Node.js 預設的套件管理系統,所以他在 Node.js 安裝時就會一起安裝好。
確認方式:在 terminal 輸入 npm -v

確認有安裝後,就來實際操作一次。
假設我們想要用一個叫 left-pad 的模組,就先到 npm 的官網,搜尋 left-pad,進到頁面裡就會告訴你安裝必須輸入的指令。

在 terminal 輸入 npm install left-pad(表示你想要安裝 left-pad 這個套件),此時做的動作其實就是下載這個 left-pad 的相關檔案到你的資料夾內,待安裝好之後就可以使用摟。

此時你會發現多了一個叫 node_modules 的資料夾,你下載的 npm 都會放在裡面管理。
接者就可以使用這個 module了,使用方法在剛剛的頁面中都有說明。

var leftpad = require('left-pad’)                //因剛剛有下載到資料夾內了,所以是引用local的檔案,要加./,但如果沒加系統也會自己去各個地方找。

console.log(leftpad('derek', 10, 'D'))

答案便會輸出 DDDDDderek。

好,我發現 npm 真是好用,所以我就裝了 100 個 module,當我要上傳 GitHub 與其他人共用時,檔案都要備份上去所以檔案就變得超大,這些 module 網路上就可以找到,有辦法讓其他人知道我用了哪些,讓他們自己去安裝嗎?

當然可以,但首先我們要先有一筆我們用了哪些 module 的名單吧。
輸入 npm init,他會請你填一些資料,可以都按 enter 略過,最後 yes 就 ok。
這時候你用 ls 查(或是你直接打開資料夾),就會發現你多了一個 package.json 的檔案。

他其實就是描述你這個檔案的檔案。

打開之後可以看到 dependencies,他會記錄著你裝了什麼 library。所以其他人只要有你的主程式碼 & package.json,輸入 npm install,他就會依據你的 dependencies,自動幫你把所有 module 下載到你的資料夾內。

因此當我們要上傳更新檔到 GitHub 時,我們其實是會將 node_modules 這個資料夾排除掉的。

除了 dependencies 之外,package.json 裡面還有一個叫 scripts 的東西。作用有點像宣告一個變數,當 npm 執行這個變數時,就可以執行你設定的東西。

用法如下(以 start 為例):
在 scripts 下加入,"start": "node index.js"
所以之後在 terminal 輸入 npm run start,就等同於輸入 node index.js

補充資訊:


npm 套件 - eslint

為什麼要特別講這個套件呢?
因為這次交作業需要用到,哈哈哈。

先簡單講一下 eslint。

eslint 可以拆成 es + lint 來看
es = ECMAScript (JavaScript 的語法標準)
lint 是一種拿來檢查程式碼的工具
所以合起來就是用來檢查 JavaScript 語法的工具。

可以照剛剛的流程去官網下載,但因為原本的檔案,已經裝好了 eslint 還有其他的 plugin 套件(要看裝了什麼,可以到 package.json 裡面看)
所以這邊只要 npm install 就會幫你安裝好,裝完會跑出 setting up git hooks 的訊息。

這是什麼呢?

Git 版本控制入門(4)- git 狀況劇,這篇有提到 hook 的概念,你可以把你要的東西掛在上面,以 git 來說,你可以在 commit 之前掛一個 hook,所以當在 commit 前,他就會先執行這個 function,確定沒問題之後才會讓你 commit。

所以當你如果要 commit 檔案時,他就會開始跑檢查,有錯誤除了不讓你 commit 外,也會印出錯誤的行號和錯誤的點。Error 要修掉,warning 不用修也沒關係,就只是提醒你,修錯誤的習慣是從後面的行數修回來,為什麼要這樣?
很簡單,因為如果前面行數要你多加一行,當你加了之後,後面行數就不是原本印出來的數字了,會造成修改上的困擾。

但如果這個錯誤是故意的,一定要這樣寫,要怎麼辦呢?

在檔案第一行寫 /* eslint 規則名稱 */,這邊的規則名稱會在錯誤訊息那列的最後,複製過來即可。

或是

在你錯誤的前一行加上 // eslint-disable-next-line 也可以。

參考資料:ESLint 學習筆記


yarn

yarn 又是什麼?
yarn 是一個由 facebook 開發,與npm功能相似的東西。

去官網按照流程安裝好後,yarn -v 去確認是否安裝成功。
輸入 yarn init 等同於 npm init
輸入 yarn 等同於 npm install
輸入 yarn add left-pad 等同於 npm install left-pad
輸入 yarn run start 等同於 npm run start

所以 yarn & npm 擇一即可,一般來說 yarn 比較快。


#npm #module #yarn #ESLint







Related Posts

TechBridge Weekly 謝幕感想

TechBridge Weekly 謝幕感想

官方 ASP.NET Core 教學課程沒有說的小地方 - Part 1

官方 ASP.NET Core 教學課程沒有說的小地方 - Part 1

Python Table Manners - pre-commit: git commit 前做完檢查

Python Table Manners - pre-commit: git commit 前做完檢查


Comments