JS 模組化：Import 和 export

之前使用的模組化是採用 require 和 export，現在的 ES6 語法可以更簡潔快速的撰寫模組化程式。

import

要在終端機輸入指令時，因為 node 還沒有支援 import，所以需要使用 babel，輸入：npx babel-node index.js

import {add, PI} from './utils'

console.log(add(3, 5), PI)

export

export function add(a, b){
  return a + b
}

export const PI = 3.14

接下來可以將它變形，讓看程式碼的人一眼就知道我要 export 哪些東西：

function add(a, b){
  return a + b
}

const PI = 3.14

export {
  add,
  PI
}

更改名稱

如果想要將變數或方法更改名稱，可以使用as，例如：

import 端更改名稱，此種方式 export 端不需要做更動：

import {add as addfunction, PI} from './utils'

console.log(addfunction(3, 5), PI)

export 端更改名稱，此種方式 import 端需要撰寫更動之後的名稱：

function add(a, b){
  return a + b
}

const PI = 3.14

export {
  add as addfunction,
  PI
}

所有東西都 import

使用 *代表所有已經 export 的東西都要 import：

//import 所有東西，並且稱之為 Utils
import * as Utils from './utils'

console.log(Utils.add(3, 5), Utils.PI)

設定預設值

這個功能其實不常用～
import 端，差別只在於不需要加大括號：

import add from './utils'

console.log(add(3, 5))

如果除了預設的 add 還想要 export PI：

import add, {PI} from './utils'

console.log(add(3, 5), PI)

export 端，加上 default：

export default function add(a, b){
  return a + b
}

export const PI = 3.14