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 跑完後,及完成安裝並自動啟用
    npm install 的 terminal 畫面
  • 打開作業,寫完時 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
  • 測試要盡可能寫得完整
  • 邊測試邊寫程式,越修越好
#npm #ESLint #module #Jest #JS201 #MTR04






你可能感興趣的文章

一起來了解 Javascript 中的 Proxy 與 Reflect

一起來了解 Javascript 中的 Proxy 與 Reflect

CSS Box, Text Shadow

CSS Box, Text Shadow

[Release Notes] 20200930_v1 - Add navbar search bar

[Release Notes] 20200930_v1 - Add navbar search bar






留言討論