[筆記/JS102] 升級你的 JavaScript 技能：ES6 + npm + Jest

[Kumasan850314]

Module 模組

沒有模組化的程式一開始可能會長這樣，且都放在一起：

• 登入系統
• 金流系統
• 會員系統
• 權限管理系統

模組化就變成這樣，再透過主程式串接所有的模組

Require、Exports

瀏覽器原生並不支援 CommonJS（require 與 module.exports），一定要透過工具才能在瀏覽器上面使用。例如 webpack、browserify 之類的打包工具。簡單來說，就是讓你在瀏覽器上面使用 require。

以 NodeJs 為例，要引入 NodeJs 提供的一個 os 模組

let os = require('os')
console.log(os.platform())

引入自己寫的模組

myModule.js

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

index.js

let double = require(./_myModule.js) // 一般來說不寫.js，它機制會直接去找 myMoudle 的組合
console.log(double)

如果想要 export 更多東西

module.export = {
  double: double,
  triple: function(n){
    return n * 3
  }
}

比較這兩種寫法

export.double = double 
-
module.export = double
module.export = [1, 2] 

• 第一種寫法可以把 export 當成一個空物件的感覺像是這樣，{ double: double }，所以這種寫法傳過去的一定是一個物件。
• 第二種寫法後面可以是任何值，後面的值是什麼型態，傳過去的就是那個型態。.

延伸閱讀

webpack 新手教學之淺談模組化與 snowpack

[Kumasan850314]

NPM

可以都全部 Enter，會創建一個 package.json

npm init 

假設我要上傳一個專案，但是有很多模組，就可以直接把 node_module 資料夾刪除再上傳，然後下載的人也可以到package.json 查看我使用了哪些模組，下載專案之後它也可以用 npm install 就會自動把模組都下載回來。

從 npm 5 以後，--save 就已經變成預設的選項了，因此 npm install 不加 --save 也是可以的喔，一樣會把資訊寫到 package.json 裡面去！

package.json 裡的 script {}

最常用的是下面這種寫法。然後在終端機輸入 npm run start 就會執行 node index.js 。（一種約定俗成的寫法，就可以直接執行專案）

"scripts": {
"start": "node index.js",
},

[Kumasan850314]

Jest

TDD 測試驅動開發

先寫測試，在寫程式。邊界條件列的越詳細越好。

[Kumasan850314]

ES6

Javascript 是根據 ECMAScript 規範實做的。ECMAScript 6 發布於 2015年，簡稱 ES6。 如果不知道什麼時候要用，就不要用，但是至少知道有這些語法可以用，不用再造輪子了。但可以把 var 換成 let、const 了。

let、const

再也不需要字串拼接：Template Literals

一般字串不能這樣拚接，必須用 /n 才可以拼接字串

let str = ' hello 
world'
Uncaught SyntaxError: Invalid or unexpected token

如果你的字串很長就會很繁瑣很複雜，像是這樣 可以比較兩者的差別，就不用寫一堆的引號跟+號，也很好辨別。${裡面可寫JS}

function hi(name){
    console.log("hi "+ name + " now is " + new Date() )
    console.log(`hi ${name} now is ${new Date()} yo ${name} `)
}
hi('kuma')

聽起來很酷的 Destructuring：解構

反正它就會自己 mapping 上去

const arr = [1, 2, 3]
let [a1, a2, a3] = arr 
console.log(a1, a2, a3) // 1 2 3 
----
const obj = {
    name: 'kuma',
    age: 30
    family: {
      father: 'nick'
    }
}
let {name, age} = obj
let {family: {father}}
console.log(name, age) // kuma 30
console.log(father) // nick
----
function test({a, b}){
    console.log(a, b)
}
test({a:1, b:2})

把東西展開：Spread Operator

展開陣列

function add(a, b, c){
return a + b + c
}
let array = [1, 2, 3]
console.log(add(...array)) // 6 

展開物件

let obj1 = {a:1, b:2}
let obj2 = {a:3, ...obj1 } // a=1, b=2 原本的會被蓋掉

也可以用來複製陣列、物件的值。複製的並不會指向同一個記憶體。所以用 === 比較會是 false，

let nobj1 = {name: 'kuma', age: 30}
let nobj2 = nobj1 
console.log(nobj1 === nobj2) // true
----
let nobj2 = {...nobj1}
console.log(nobj1 === nobj2) // false

「反向」的展開：Rest Parameters

看這個好了

加上預設值：Default Parameters

用在函數的預設值

function hello(str, times=5){
    return `${str} times: ${times}`     
}
console.log(hello('kuma')) // kuma times: 5

Function 的更新：箭頭函式 Arrow Function

比較一下兩者的寫法，要注意 this

var arr10 = [1,2,3,4]
console.log(
    arr10
    .filter(function(value) { return value > 1 })
    .map(function(value) { return value * 2 })
)
----
console.log(
    arr10
        .filter(value => value >1)
        .map(value => value *2 )
)

Import 與 Export

ES5、ES6 導入導出皆是成對使用的

ES5: require、module.export ES6: import、export {}

Export 有幾種方式：

1. export function add(){}，使用 import {add} 引入
2. export { add }，與上面那種一樣
3. export default function add()，使用 import add 引入，不需要加大括號

如果想要用其他名字，可以用 as 取別名，例如說 export { add as addFunction } 可以用 import * as utils from 'utils' 把全部都 import 進來

之後有問題看看這些： [Node] CommonJS Modules and ES Modules nodejs的import和export，如何编写执行es6模块？ ES6 模組系統

補充紀錄用：

請試著將 import 的 file 全名打完，不要省略副檔名 .js。import std from './route/student' -> import std from './route/student.js' 現在 nodejs 似乎支援 export, import 這類 ES Modules 的特性，但是要在 package.json 裡面加上 "type": "module" 才能正常使用。

更多 ES6 新增的語法：https://github.com/DrkSephy/es6-cheatsheet

[Kumasan850314]

Babel

babel-node 比較適合自己用/看，不太適合用在產品，效能不太好。正常使用會先用 Babel 編譯完，再用 NodeJS 執行編譯好的檔案。

Babel 的安裝說明：https://babeljs.io/docs/en/next/babel-node.html

設定步驟：

1. 安裝必要套件：npm install --save-dev @babel/core @babel/node @babel/preset-env
2. 新增 .babelrc (檔案名稱全名就這樣 別懷疑 放在根目錄)
3. 填入內容，告訴 babel 要用這個 preset：

.babelrc { "presets": ["@babel/preset-env"] // 這個會把 ES6 轉 ES5 }

最後使用 npx babel-node index.js 即可

[Kumasan850314]

JS102 總結

1. 模組化（避免再多個檔案內更改同一個 function）
2. 單元測試
3. ES6