有關es6的模塊化

假如有兩個文件：app.js和config.js

app.js為主文件要去引用config這個模塊

以前學習node時使用的模塊導出:

需求：導出三個成員，分別是 foo: bar f: function num: 10

exports.foo = 'bar'
exports.f = function () {
  
}
exports.num = 10

es6中的模塊導出

方法一

export const foo = 'bar'
export const f = function () {
  
}
export const num = 10

兩種可以混合使用
方法二

const foo = 'bar'
const f = function () {
  
}
const num = 10

export {
  foo,
  f,
  num
}

通過 export 導出的成員必須通過解構賦值按需載入
或者通過import * as 變數名的形式載入所有通過 export 關鍵字導出的介面成員
通過 export default 載入導出的成員必須通過 import 變數名 from '模塊標識' 進行載入
export 和 export default 可以共存

import config from './config'
import { foo, num } from './config'
import * as config from './config'
import { foo } from './config'

預設導出

config.js

// 相當於 module.exports = function () {}
export default function () {
  console.log('fff')
}

app.js:

// 這種方式會去找被載入模塊中通過 export default 導出的成員
import defaultConfig from './config'

defaultConfig任意指定

最後通過模板字元串將它們列印出來

console.log(default: ${defaultConfig}, foo: ${foo}, all: ${allConfig})