es6 的 import 與 export

筆記如何使用 ex6 的 import 與 export，name export 與 export default 的用法及差異

export default

建立欲模組化的檔案

// math.js
const math = {
 double: x => x * 2,
 square: x => x * x,
 area: (x,h) => x * h
}
export default math

引入模組化的檔案

// main.js
import math from './math'
console.log(math.double(4)) //成功輸出 8

import 檔案名稱 from ‘./檔案路徑(副檔名.js可省略)’

import 進來的檔案名稱可重新命名，不需要與原檔名相同，如 import m from ‘./math’

---

name export

建立欲模組化的檔案

// math.js
export const PI = 3.1415
export const Root_2 = 1.414

引入模組化的檔案

// main.js
import { PI, Root_2 } from './math'
console.log(PI, Root_2) //成功輸出 3.1415 1.414

name export 的模組記得要加上{}， 如 {要引入的模組名稱}

引入的模組使用 as 即可重新命名，如 { PI as P, Root_2 as R }

---

export default 與 name export 混用

// math.js
const math = {
 double: x => x * 2,
 square: x => x * x,
 area: (x,h) => x * h
}
export const PI = 3.1415
export const Root_2 = 1.414

export default math

// main.js
import math, { PI, Root_2 } from './math'
console.log(math.square(11), PI, Root_2) //成功輸出 121 3.1415 1.414