ES6 模組化 export 和import
阿新 • • 發佈:2018-12-18
1.定義模組:
export const a = 1
export default b = 2
2.匯入模組
import {a} from './xxxxx'
import b from './xxxxx'
3.區分什麼時候import 需要花括號,什麼時候不需要
當使用export default 匯出的模組,匯入的時候就不需要花括號,否則都需要花括號
4.匯出另命名
const a =1
const b = 2
export {a as apple,b as bananer}
匯入接收
import {apple,bananer} from './xxx'
5.匯入另命名
const a =1
const b = 2
export {a,b}
匯入
import {a as apple,b as bananer} from './xxx'
console.log(apple,bananer)
6.匯入全部
import * as newModule from './xxx'
console.log(newModule)
注意:import 有提升效果,使用了import後匯入的語句會優先提到最開始先執行
7.不允許動態匯入
let a=1 if(a == 1){ import {a} from './xxxx' }else{ import {b} from 'xxx' }
以上程式碼錯誤。不允許動態匯入
如何才能動態匯入呢?
8.動態匯入
想要動態匯入(按需載入),採用promise
import('./xxxxx').then(res=>{
console.log(res.a,res.b)
})
這種寫法還可以動態陪匯入路徑
let a =1
function config(){
if( a==1){
return './xxxx'
}else{
return './aaaa'
}
}
import (config(1)).then(res=>{
console.log(res)
})