1. 程式人生 > >ES6 模組化 export 和import

ES6 模組化 export 和import

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