第13章 模块化

默认导出

• 默认导出使用 export default
• 默认导出只能有一次

let s1 = 'aaa';
let s2 = 'bbb';
function say() {
  console.log(s1 + s2);
}

export default { s1, s2, say };
// export default [s1, s2];
// export default say;

默认导入

• 默认导入时是什么形式，接收到的就是什么形式

// export default { s1, s2, say };
import m from './2.js';
console.log(m); // { s1: 1, s2: 2, say: [Function: say] }

// export default [s1, s2];
import m from './2.js';
console.log(m); //[ 'aaa', 'bbb' ]

// export default say;
import m from './2.js';
console.log(m); // [Function: say]

按需导出

• 方式一：在需要导出的成员前添加 export
• 方式二：使用 export 统一导出

export let s1 = 'aaa';
export let s2 = 'bbb';
export function say() {
  console.log(s1 + s2);
}

// export { s1, s2, say };

按需导入

• 按需导入的成员需要写在 {} 中
• 导入的成员名需要与导出时一致
• 可以通过 as 关键字重命名
• 按需导入也可与默认导出一起使用

import { s1, s2, say } from "./2.js"
console.log(s1);	// aaa

// as重命名
import { s1 as str1, s2, say } from "./2.js"
console.log(str1);	// aaa

// m为默认导出的对象
import m, { s1, s2, say } from "./2.js"
console.log(s1);

直接导入并执行

// 1.js中直接使用 import 导入
import './2.js' //我是2.js里的语句

// 2.js中无需使用export
console.log("我是2.js里的语句");