ES6 模块化 export 和import

73 阅读1分钟

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