ES6 & ES7 - Module

ES6 - Module

不用default导出

// A.js
export function a(){
  console.log('aaaa')
}

export function b(){
  console.log('bbb')
}
export const c = 10;

或：

function a(){
  console.log('aaaa')
}
function b(){
  console.log('bbb')
}
const c = 10;

export { a,b,c }

引入方式：

import {a as fun_a,b as funb,c as num_c} from '../js/A.js'
mounted(){
	fun_a()
	fun_b()
}

或：

import * as lib from '../js/A.js'
mounted(){
	lib.a()
	lib.b()
}

---

用default导出

不需要知道导出的具体变量名, 导入(import)时不需要{}.

function a(){
  console.log('aaaa')
}

function b(){
  console.log('bbb')
}
const c = 10;

export default {
  fun_a:a,
  fun_b:b,
  num_c:c
}

不需要花括号引入

import $ from '../js/A.js'

mounted(){
	$.fun_a()
	$.fun_b()
}

---

混合导出

function a(){
  console.log('aaaa')
}

function b(){
  console.log('bbb')
}

export const c = 10;

export default {
  fun_a:a,
  fun_b:b
}

混合引入：

import lib,{c as num_c} from '../js/A.js'
mounted(){
 lib.fun_a();
 lib.fun_b();
 console.log(num_c)
}

ES7 - Module

静态import在首次加载时候会把全部模块资源都下载下来.

但我们实际开发时候，有时候需要动态import（dynamic import) .

普通写法：

import('../js/A').then((lib)=>{
   console.log(lib.)
 });
console.log('hello')
// hello aaaa

ES7写法：

async function load(){
  let lib = await import('../js/A');
  lib.a()
  
  // or
  
  let {a,b,c} = await import('../js/A')
  a()

  // or (引入多个模块)
  let [lib1,lib2] = 
  	await Promise.all([
		import('../js/A.js'),
        import('../js/B.js'),
 	])
 	
  lib1.a();
  console.log(lib2.b)
}

load()

---

总结

1.用default打包导出来的，不用花括号，且一个模块只能由一个 export default

// A.js
export default{
	func_a:a,
	func_b:b  
}
import lib from './A.js'

2.不用default导出

function a(){
  console.log('aaaa')
}

function b(){
  console.log('bbbbb')
}

const c = 10;

export {
  a as func_a,
  b as func_b,
  c as num_c
}

or

export function a(){
  console.log('aaaa')
}

export function b(){
  console.log('bbbbb')
}

export const c = 10;

有两种引入方式

// 第一种：使用花括号{}逐个引入
import {func_a,func_b,num_c} from '../js/A.js'

// 第二种，全部引入，严格遵循写法
import * as lib from '../js/A.js'