最全 es6 模块导入和导出

变量导入导出

// 导出
// export const a = 1
// export let b = 2
// export var list = ['list']

const a = 1
let b = 2
var list = ['list']

export {
  a,
  b,
  list
} 


// 导入
import {a,b,list} from '../src/vueplug/index'
console.log(a,b,list);

默认导出 export default 和导入,及别名的情况

const a = 1
let b = 2
var list = ['list']

export {
  a,
  b,
}
// 只能默认导出一个
export default list



// 导入，注意默认导出的那个值 我们就不用{}来导出
import list,  {a,b} from '../src/vueplug/index'
console.log(a,b,list);
// 别名讲list 改为list1
import list1,  {a,b} from '../src/vueplug/index'
console.log(a,b,list1);

export default 导出多个变量 不用每次定义变量的方式

export default {
  a:1,
  b:2
}




// 导入，注意默认导出的那个值 我们就不用{}来导出
import list from '../src/vueplug/index'
console.log(list.a);

export default 没使用{} 和 export default 使用{} 的区别

// 导出
let num = 999

export default num

// 导入，注意默认导出的那个值 我们就不用{}来导出
import num from '../src/vueplug/index'

console.log(num)  // 999



// 导出
let num = 999

export default { num }

// 导入，注意默认导出的那个值 我们就不用{}来导出
import num from '../src/vueplug/index'

console.log(num)  // { 999 }

函数导出和导入的形式

// 导出
const test = () =>{
  console.log('test');
}

export {
  test
}

export function say(content) {
  console.log(content);
}


export default function run() {
  console.log('run');
}


// 导入
import run,  {test,say} from '../src/vueplug/index'

run()
say('hello')
test()
   

对象的导入和导出的形式

// 导出
const data = {
  name: 'liu man'
}

const des = {
  adr : 'beijin'
}
 


export {
  data,
}

// 不能以这样的形式导出对象 ， 会引起语义的冲突
// export {
//   code: 0,
//   age: 20
// }


export default {
  age: 20,
  des
}


// 导入
// 不能以这样的形式导出，会引起语义的冲突
// import {age, des} from '../src/vueplug/index'
import obj,  {data} from '../src/vueplug/index'
let {age,des} = obj


console.log(data);
console.log(age);
console.log(des.adr);

类的导入和导出的形式

// 导出
class Test {
  constructor(id) {
    this.id = 1
  }
}

class Test2 {
  constructor() {
    this.id = 2
  }
}


// export {
//   Test
// }

// export default Test2

// export default class Test3 {
//   constructor() {
//     this.id = 3
//   }
// }


// export default class {
//   constructor() {
//     this.id = 4
//   }
// }

export class Test5{
  constructor() {
    this.id = 5
  }
}


// 类不能以这样的形式导出， 语义上的冲突
// export default {
//   Test2
// }

// export class {
//   constructor() {
//     this.id = 4
//   }
// }

// 导入
// import Test2 , {Test} from '../src/vueplug/index'
// import Test3 from '../src/vueplug/index'
// import Test4 from '../src/vueplug/index'
import {Test5} from '../src/vueplug/index'


// let test = new Test()
// console.log(test.id);

// let test2 = new Test2()
// console.log(test2.id);

// let test3 = new Test3()
// console.log(test3.id);

// let test4 = new Test4()
// console.log(test4.id);

let test5 = new Test5()
console.log(test5.id);

多个模块导出和导入的形式

// 导出
class Test {
  constructor(id) {
    this.id = 1
  }
}

class Test2 {
  constructor() {
    this.id = 2
  }
}


export {
  Test,
  Test2
}

export default class Test3 {
  constructor() {
    this.id = 3
  }
}

// 导入
// import {Test,Test2} from '../src/vueplug/index'
// 这样的好处是不用引入多个
import * as Mold from '../src/vueplug/index'

// let test = new Test()
// console.log(test.id);
// let test2 = new Test2()
// console.log(test2.id);
let test = new Mold.Test()
console.log(test.id);
let test2 = new Mold.Test2()
console.log(test2.id);
// 注意* 这样的形式导出时 ，是不包含export default的模块，需要与Mold.default方式获取
let test3 = new Mold.default()
console.log(test3.id);

关乎导出的模块是否能相互引用

// 导出
const test= () =>{
  console.log('test');
} 

const run = () => {
  test()
}

export {
  run
}

export function say() {
  console.log('say');
}

export function eat() {
  say()
}

// 导入

import  {run,eat} from '../src/vueplug/index'

run()
eat()