ES6模块化

Posted 2021-11-24 web半晨

目录

• 1、默认导出/导入
• • 1.1、默认导出
  • 1.2、默认导入
• 2、按需导出/导入
• • 2.1、按需导出
  • 2.2、按需导入
• 3、直接运行模块中的代码
• • 3.1、需要运行的代码文件
  • 3.2、运行代码的文件

---

1、默认导出/导入

1.1、默认导出

let n1 = 10;
let n2 = 20;
function show() {};

export default {
	n1,
	show
};

// 一个.js文件中不能有两个
// export default { };

// export default {
//	n2,
// };

---

1.2、默认导入

import m1 from './01.默认导出.js';

console.log(m1); 
// { n1: 10, show: [Function: show] }

---

2、按需导出/导入

2.1、按需导出

export let s1 = 'aaa';
export let s2 = 'ccc';
export function say() {};

export default {
	a: 20
};

---

2.2、按需导入

import info, { s1, s2 as str2, say } from './03.按需导出.js';
// as: 重命名 把 s2 重命名为 str2
console.log(s1); // aaa
console.log(str2); // ccc
console.log(say); // [Function: say]
console.log(info); // { a: 20 }

---

3、直接运行模块中的代码

3.1、需要运行的代码文件

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

---

3.2、运行代码的文件

import './05.直接运行模块中的代码.js';