ES6 的模組機制

很亂捏。

懶人包

export

1. 只能用變數或命名函式輸出
2. 輸出跟引入的時候可以取別名
3. 引入的時候要用 {}，「解構」的方式取出（可以想成東西都被用物件包起來輸出）

export default

1. 後面接什麼就輸出什麼（不會幫你用物件包起來）
2. 一個檔案只能有一個 default 輸出
3. 引入的時候不用 {}，直接自定義名稱
4. 不可以取別名

補充：要在 Node.js 裡面跑的話要記得在 package.json 裡面設定 "type": "module" 才能正常執行。

補充：要在 Browser 上跑的話要記得這樣寫

<script type="module"></script>

另外要開 Live-server 才有辦法跑，不然會被 CORS 擋住。

export 一個一個輸出

輸出：

// utils.js
export function add(a, b) {
  return a + b
}
export const PI = 3.14159 

引入：

// main.js
import { PI, add } from './utils.js'
console.log(PI)  // 3.14159 
console.log(add(1, 3))  // 4

引入的時候也可以取別的名稱：

// main.js
import { add as ffff, PI as AAA } from './utils.js'
console.log(AAA)  // 3.14159 
console.log(ffff(1, 3)) // 4

如果一個一個引入太麻煩也可以用 * 一次引入成一個 object：

// main.js
import * as yoooo from './utils.js'
console.log(yoooo.PI)  // 3.14159 
console.log(yoooo.add(1, 3))  // 4

export 用物件包住一起輸出

輸出：

// utils.js
function add(a, b) {
  return a + b
}
const PI = 3.14159 
export {
  add,
  PI
}

引入：

// main.js
import { PI, add } from './utils.js'
console.log(PI)  // 3.14159 
console.log(add(1, 3))  // 4

輸出的時候可以取別的名稱：

// utils.js
function add(a, b) {
  return a + b
}
const PI = 3.14159 
export {
  add as addFunction,
  PI as AAA
}

別忘了引入的時候也要對應起來：

// main.js
import { AAA, addFunction } from './utils.js'
console.log(AAA)  // 3.14159 
console.log(addFunction(1, 3)) // 4 

export default

輸出一個東西

輸出：

// utils.js
export default 'yoyoyo'

引入：

// main.js
import abc from './utils'
console.log(abc)  // yoyoyo

輸出多個東西（用物件包）

輸入：

// utils.js
function add(a, b) {
  return a + b
}
export default {
  add,
  ggg : 'hello'
}

引入：

// main.js
import cool from './utils'
console.log(cool.add(1, 2)) // 3
console.log(cool.ggg) // hello