1. 程式人生 > 實用技巧 >有關es6的模組化

有關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})