Week3 筆記｜[JS102] Module、NPM、eslint、Jest

★ Module 模組 是什麼

一個模組就是一個功能， eg. 登入、金流、權限、會員。
使用

• 使用 require 借別人的來用 ; 把別人寫好的東西引入進來。

  var os = require('os')
  console.log(os.platform())
  //darwin ( mac 作業系統）
  

• 自己做出一個module，借給別人用、或是自己使用： export (使用 module.exports)

  function double(n) {
    return n * 2
  }
  module.exports = double
  

  //寫一個名叫 double 的 function，使用module.exports 做輸出
• 使用（require）

  var myModule = require('./myModule')
  console.log(myModule)
  

  //require 後面接要放的 module 路徑，不放./路徑也可以，require 它很聰明會自己找，或到專放 module 的 node_modules 資料夾裡找。

★ NPM 簡介

Node Package Manager 管理 node 的js 一個系統。管理套件。裝 node 時就已預設裝進去的了。
官網：npmjs.com （一個很大的套件倉庫）

使用

• 檢查是否有 npm，可在 terminal 中打 npm - v來顯示出 npm 的版本。
• npm init 來做開始，一路一直按 enter 做確定。
• 會產生出一個檔案叫 “package.json”，module 就會存在這裡，顯示出這個專案有用了哪些依賴、哪些模組。沒有存在這的話，別人打開檔案會不易看到專案的模組有哪些。
• 打開 package.json 會看到專案的名字還有一些資料，沒有很重要。
• 如果要安裝套件，可在 terminal 輸入 npm install module名。
  

• 裝完之後，使用 ls-al 會發現資料夾底下多兩個檔案：

  1. package.json
  2. node modules (可忽略）

• 或使用npm install module名 --save 將 module 寫到 package.json 的 “dependencies” 下。

• npm install module名 --save -dev將 module 寫到 package.json 的 “devdependencies” 下。
• “devdependencies” vs “dependencies” 只有些微差別。devdependencies是只有開發會用的 library。

★ NPM Scrips

最常用的是，設定 start 開始，將專案跑起來。

"start": "node index.js (指定的檔案）"

在 terminal 執行 npm run start ，會執行scripts 指定的檔案。

★ Yarn：npm 以外的另一種選擇

yarn 由 Facebook 所開發。
yarn 及 npm 選一個使用即可，混用亦可。但通常新的專案都會使用 yarn，yarn 在裝東西及處理較快，也很熱門。
至官網 yarnpkg.com 下載。下載完成後，至 terminal 輸入 yarn -v 可看到看到下載好的版本資訊。
使用

• npm install = yarn
• npm install module名 = yarn add module名
• npm run start = yarn run start

★ eslint 簡介

eslint = es +lint
ECMAScript:是 JavaScript 的標準。
lint:是檢查工具。
eslint: 就是檢查 js 語法用的

使用

• 到 terminal 中 mentor-program-4th-YYLu1118
• 輸入 npm install 跑完後，及完成安裝並自動啟用
  
• 打開作業，寫完時 commit 後會出現以下畫面，來駐解出哪裡不符合 js 語法。

• 行號：哪一個字 error 錯什麼。

  建議從最後一行開始做調整，以防行數變動。
  

• / eslint-disable/ 加在開頭，不會被eslint 檢視。

• //eslint-disable-next-line 加在不要被檢視的行列上，則不會被 eslint 檢視。

★ 怎麼測試你的程式？(重要）

1. 陽春的方法，有效但無法規模化：
   使用 console.log 做測試
   
   
2. 利用 Jest 來寫你的測試，jest 是 Facebook 開發的 framework。如同 console.log 一樣印出結果，但幫我們包裝好，也提供了一個整齊漂亮的測試結果。

★ Jest

參考 jest 官網來做安裝 https://jestjs.io/docs/en/getting-started

• 使用 yarn add --dev jest or npm install --save-dev jest 來安裝。
• touch indext.text.js 來新增一個測試檔（ .text.js 為慣例，做為測試的檔名）
• 待續

★ TDD

TDD = Test-driven Development 測試驅動開發

• 先把測試寫好，再來寫 function
• 測試要盡可能寫得完整
• 邊測試邊寫程式，越修越好