用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》

用十分鐘瞭解 JavaScript 的模組
《還有關於 npm 套件管理的那些事情》
陳鍾誠
2016 年 3 月 29 日
程式人程式人
本文衍生自維基百科

話說
● 如果你聽到 node.js, npm, gulp, grunt,
bower, yo, browserify, webpack 等名
詞，應該會以為這是某外星人說的《克林
貢語》吧！

雖然距離我第一次遇見 JavaScript
●已經有 20 個年頭了！
●但我還是不太瞭解
JavaScript 這個語言

而且自從 node.js 出現之後
●我就更不瞭解它了！

即使
● 我開始用 node.js 已經超過 3 年了
● 我仍然一直聽到各種《克林貢語》出
現在我的耳邊！
● 彷彿我來到這個星球才只有三天而已

更別說是
● 前端領域變來變去的套件，像是
angular, react, backbone, ember
等等那些火星文了！

沒辦法
● 自從我們揮別了《微軟帝國》的統
一世界之後，世界就開始崩解、崩
解、再崩解 ...

於是我們有了
● Apple,iPod, iPad, iPhone,iMac,
iOS, iTune, Xcode, …
● Google, Android, GAE, Play …
● Amazon, EC2, Arduino, Raspberry
Pi, Ruby, Python, Haskell …

即使只把焦點鎖定在 node.js 領域
● 我們也有 async, lodash, underscore,
async,kama, mocha, cordova, forever,
express, koa, connect, commander, …
等等數十萬種套件可以使用

等等、還沒完
●由於這張投影片太小，無法
盡列，所以請自行上 npm
去找到這些套件！

喔！
● 那是 node.js 裏的一個指令
● 是 node package manager 的簡稱

喔！
● 可以用來
–安裝套件
–發佈套件
–管理套件

問題是
●甚麼是 npm 的套件？
●我要怎麼使用 npm 的套件？
●我要怎麼撰寫 npm 的套件？

喔！
●這些問題比較複雜！
●讓我們先從《使用套件》開
始講起！

想使用 npm 套件
●首先您得上 npm 網站去查詢
●你想要用的套件！

舉例而言
● 假如我們知道有個叫 numeric 的套件
● 而且知道這是一個矩陣運算的套件
● 那麼我們就可以上 npm 網站去看看
這個套件的描述！

有些比較好的套件
●還會有官方網站！

於是你可以去看看
● 該套件的詳細內容！

對於那些
● 可以直接掛進瀏覽器的前端套件而言
● 上面通常會有 .js 檔案的下載點！

您可以按右鍵選擇下載後存檔使用

但問題是
● 下載完 .js 檔案後要怎麼用呢？

對於這種 .js 檔案
●通常是放在網頁內使用的！

您必須要先寫個 html 網頁

接著用 Chrome 瀏覽器打開 html 檔

但是沒關係
●我們有密技！

請選《更多工具 / 開發人員工具》

這時您會看到有個窗框跑出來

該 console 可以輸入指令
● 而且有很好的提示！

您可以把它當交談式程式環境來用

而您剛剛所引入的 .js 套件
● 也可以在 console 中呼叫並使用

甚至如果你把結果輸出到網頁中
● 例如用 document.write(...)

這個 Chrome 瀏覽器的開發人員工具
● 就是《前端開發者》，也就是
HTML+CSS+JavaScript 的網頁程式設計
者最常用的工具了！

當然
● 您不只可以用 Chrome, 也可以用
火狐的 Firebug
● 當然、您也可以堅持用 IE6 來開
發，我是不會阻止你的！

當然、前端開發者
●要使用該套件，可以直接將
程式碼寫在網頁內！

然後在開啟該網頁時
● 這些程式就會被執行

於是您就可以在網頁中
●呼叫此套件並將結果顯示呈
現在網頁中！

精於此道的人
●我們會稱他為前端工程師！

當然
●既然有《前端工程師》
●必然有《後端工程師》

對於後端開發者而言
● 目前最強大的 JavaScript 平台
● 當然非 node.js 莫屬了！

問題是
● 我該怎麼在後端開發 node.js 程
式呢？

安裝的方法很簡單
●就是下載後執行，然後一直
按《下一步》就行了！

如果您在 windows 當中裝完之後
請啟動 node.js command prompt

對於使用 MAC 或 Linux 的人
● 則請您啟動《終端機》 (Terminal)

如果您還沒用過 node.js
● 可以先試著寫一些小程式
● 像是 hello.js 之類的
● 以便習慣 node.js 的程式環境！

如果這些小程式可以正常執行
● 那麼您就已經開始進入 node.js
的 JavaScript 程式領域了！

接著您可以開始安裝套件
● 例如用下列指令
–npm install numeric
● 安裝剛剛那個 numeric.js 套件

奇怪的是、為何有警告訊息？

請不用擔心
● 那只是告訴你，你沒有定義 package.json
裏的一些欄位
● 因為你根本還沒創建 package.json 這個安
裝指引檔案
● 待會我們會說明如何定義 package.json ！

在安裝完 numeric 套件後
● 您會看到出現了 node_modules/numeric 這些子資料夾
● 那些就是剛剛安裝的套件內容！

現在、讓我們開始在 node.js 裏使用
● 剛剛所安裝的 numeric 套件吧！

我們先寫一個測試程式
● 就叫 test.js 好了！
引用 numeric 套件

如果能正常執行
●那就代表引用套件成功
●而且您使用該套件的方法是
正確的！

寫到這裡
●您以為故事講完了嗎！

本文的主題
●才剛剛開始而已！

但是、到目前為止
●我們都還沒開始
撰寫自己的模組呢？

問題是
● 我們要怎麼樣撰寫自己的模組呢？

方法不難
● 一樣是寫 .js 程式
● 只是最後要加上
– module.exports = <object>
● 這樣才能給其他程式使用

例如
● 我們可以用剛剛那個 numeric.js 套件
為基礎
● 重新包裝出自己的 jslab.js 這個科
學計算函式庫。

以下是 jslab.js 的程式碼

您可以看到、我們只不過把 numeric 重新包裝
成 jslab ，然後就用 module.exports 匯出了

接著我們就可以寫一個測試程式
jslab_test 來使用這個 jslab 模組

jslab_test 的執行結果如下

換句話說、每個程式
只要用 module.exports 匯出物件

接著就可以用 require() 函數
引入該物件來使用

但必須注意的是
● 引入自己定義的模組，必須要指定路徑，如果兩
者放在同一資料夾，那也必須加上 ./ 的符
號，告訴 node.js 該檔案在同一資料夾底下。

不過如果是引用
● 系統預設的模組或者 npm 安裝的套件
● 那麼就不用加上 ./ ，直接寫模組名稱就可以了。

好了、現在我們已經學會了
●如何自己定義模組了！

但問題是
●我寫的模組要怎麼發佈給別
人使用呢？

關於這個問題，就必須要請
package.json 登場了

package.json
● 是用來描述《發佈模組》的一個檔案。
● 其中會記載《套件名稱、版本代號、作
者、套件網址 .... 》等資訊。

您可以用 npm init 指令
來新建一個 package.json 檔案

當您回答完一堆問題後， npm
init 就會產生 package.json

產生的 package.json 內容如下

這樣、我們就已經準備好
● 可以將 jslab 套件發佈到 npm 官網上了

但是、請先確定
該套件名稱沒有被別人先申請走
● 否則您的上傳可能會失敗！

接著、我們就可以進入發佈程序
● 將 jslab 套件發佈到 npm 官網上

但是、在發佈之前
● 你必須先讓 npm 知道你是誰！

所以我要先執行下列指令

然後就可以用下列指令發布
●npm publish ./

接著再上 npm 官網查一下
● 看看您的專案是否真的發布成功了

點選 jslab 連結進去檢查看看

您會發現
● 該專案雖然發佈成功，但是卻缺少了
README 的資訊

沒有 README 資訊
● 別人就不知道怎麼用你的專案

所以我們應該加入 README 資訊

README 是個文字檔
● 現在通常用 markdown 格式寫這
種檔案，所以副檔名可以用 .md
● 也就是要寫一個 README.md 檔案

以下是 jslab 的 README.md 檔案

寫好後就可以更新版本再發佈

再檢查一下就會發現
README 資訊已經放上去了

然後、當別人想要用
這個 jslab 套件時
● 就可以使用下列指令
– npm install jslab
● 輕輕鬆鬆的安裝你的套件來用了。

現在、您應該已經學會
●如何使用別人的套件，以及
如何將套件發佈在 npm 官網
上了！

當然
●這份投影片只是個起點
●並不是全部！

或許您還可以進一步學習

如何發佈《網站型 npm 專案》，像是
● 設定 package.json 中的 bin 欄位
● 將套件用 browserify 或 webpack 轉為網站用的 .js 程式
● 正確放置《網頁資料夾》與撰寫《伺服器程式》
● 如何使用 express,koa 套件撰寫《伺服器程式》
● 如何存取 mongodb, postgreSQL 資料庫
● 如何架站或將網站發佈在 Heroku, MS. Azure, Amazon EC2 等
雲端網站上等等。

關於這些主題
● 就請各位讀者再去參考相關資源了！

以上
● 就是我們今天的十分鐘系列！

希望
● 這次的十分鐘系列
能讓您真正學會
撰寫與發佈 npm 模組的方法！

用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》 (9)

More from 鍾誠陳鍾誠 (20)

Recently uploaded (20)