ES6模块化的基本语法

1.默认导出和默认导入

• 默认导出：export default默认导出成员

m1.js:

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

function show(){
  console.log("111111");
}

export default {
  a,c,show
}

• 默认导入：import 接收名称 from “模块标识符”

index.js:

import m1 from './m1.js'
console.log(m1);

终端输出：

在每个模块中，只允许使用唯一的一次export default，否则会报错
若不使用export default，则会输出一个空对象，不会报错

2.按需导出和按需导入

• 按需导出：export let s1 = 10

m1.js:

// 默认导出
let a = 10;
let c = 20;
let d = 30;

function show(){
  console.log("111111");
}

export default {
  a,c,show
}

// 按需导出
export let s1 = 'aaa';
export let s2 = 'bbb';
export function say(){
  console.log('2222');
}

• 按需导入：import {s1} from '模块标识符'

index.js:

//默认导入与按需导出同时存在
import m1, {s1, s2, say} from './m1.js'

console.log(m1);
console.log(s1);
console.log(s2);
console.log(say);

终端输出：

也可以用as起别名

//默认导入与按需导出同时存在
import m1, {s1, s2 as ss2, say} from './m1.js'

console.log(m1);
console.log(s1);
console.log(ss2);
console.log(say);

每个模块中可以使用多次按需导出

直接导入并执行模块代码

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

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

index.js:

import './m1.js'

终端输出：