ES6模块化的基本用法

1、默认导出与导入

• 默认导出语法 export default 默认导出的成员
• 默认导入语法 import 接收名称 from ‘模块标识符’

注意：每个模块中，只允许使用唯一的一次 export default，否则会报错！

a.js文件-代码如下

let a = 10
let c = 20
let d = 30

function show() {
  console.log('1111111111111')
}

export default {
  a,
  c,
  show
}

b.js文件-代码如下

import m1 from './a.js'
console.log(m1)//执行结果 {a:10,c:20,show:[Function:show]}

2、按需导出 与 按需导入

• 默认导出语法 export let s1 = 10
• 默认导入语法 import { s1 } from ‘模块标识符’

注意：每个模块中，允许使用多次 export ！

a.js文件-代码如下

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
  console.log('ooooooooo')
}

b.js文件-代码如下

import { s1, s2 as ss2, say } from './a.js'
console.log(s1)//Print the result -> aaa
console.log(ss2)//Print the result -> ccc
console.log(say)//Print the result -> [	Function: say]

3、直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

a.js文件-代码如下

for (let i = 0; i < 3; i++) {
  console.log(i)
}

b.js文件-代码如下

import './a.js'