04-webpack核心基础-ES6模块化

一、模块化概述

---

在ES6出现之前，JS不像其他语言拥有“模块化”这一概念，于是为了支持JS模块化
我们使用类、立即执行函数或者第三方插件(RequireJS、seaJS)来实现模块化
但是在ES6出现之后, 上述解决方案都已经被废弃, 因为ES6中正式引入了模块化的概念

ES6模块化模块和NodeJS中一样, 一个文件就是一个模块, 模块中的数据都是私有的
ES6模块化模块和NodeJS中一样, 可以通过对应的关键字暴露模块中的数据, 可以通过对应的关键字导入模块, 使用模块中暴露的数据

隔离不同的js文件，仅暴露当前模块所需要的其他模块，这就是模块化思想。

二、ES6模块化的语法规范

---

有两种导出方式：常规的导出（每个模块可以导出多次）和 默认的导出（每个模块仅导出一次）。

常规的导出

1. 分开导入导出

export {xxx};
import {xxx} from "path";

例如:
aModule.js

let str = "ES6Module";

export {str};

// 等同于
export let str = "ES6-Module";

index.js

import {str} from "./aModule.js";

console.log(str);  // ES6Module

2. 一次性导入导出

export {xxx, yyy, zzz};
import {xxx, yyy, zzz} from "path";

例如:
aModule.js

let name = "lisi";
let age = 20;
function say() {
    console.log("hi");
}
export {name, age, say};

index.js

import {name, age, say} from "./aModule";

console.log(name);  // lisi
console.log(age);  // 20
say();  // hi

3. 更改变量名称

导出和导入时都可以更改变量名称

• 更改导出名称

let str = "ES6-Moudle";

export {str as name};

• 更改导入名称

import {str as name} from "./aModule";

console.log(name);

【注意】

1. 如果是通过export{xxx};方式导出数据, 那么在导入接收的变量名称必须和导出的名称一致
   这是因为导入的时候本质上是ES6的解构赋值

2. 如果是通过export{xxx};方式导出数据, 又想在导入数据的时候修改接收的变量名称, 那么可以使用as来修改
   但是通过as修改了接收的变量名称, 那么原有的变量名称就会失效

3. export语句输出的接口是对应值的引用，也就是一种动态绑定关系，通过该接口可以获取模块内部实时的值。

4. export命令规定要处于模块顶层，一旦出现在块级作用域内，就会报错，import同理。

默认的导出

导出数据: export default xxx;
导入数据: import xxx from "path";
例如:
bModule.js

let name = "zs";

export default name;

index.js

import name from "./bModule";

console.log(name);  // zs

【注意】

1. 如果是通过export default xxx;导出数据, 那么在接收导出数据的时候变量名称可以和导出的名称不一样

例如:
bModule.js

let name = "zs";

export default name;

index.js

import res from "./bModule";

console.log(res );  // zs

2. 如果是通过export default xxx;导出数据, 那么在模块中只能使用一次 export default, 多次无效

两种方式的混合使用

cModule.js

let name = "lisi";
let age = 20;
function say() {
    console.log("hi");
}
export {name, age, say};

class Person {
    constructor(){
        this.name = "ww";
        this.age = "33";
    }
}
export default Person;

index.js

import Person, {name, age, say} from "./cModule";

let p = new Person();
console.log(p);  // Person对象

console.log(name);  // lisi
console.log(age);  // 20
say();  // hi

使用通配符 * 导出

1. 重新导出其他模块的接口(其实就是转载文件)

aMdule.js

export * from "./bModule";

bModule.js

let str = "ES6-Module";
function say() {
    console.log("hi")
}
export {str, say};

index.js

import {str, say} from "./aModule";

console.log(str);  // ES6-Module
say();  // hi

个人觉得这种方法有点鸡肋, 需要哪个模块的时候导入哪个模块即可

2. 模块的整体加载

可以使用 * 来指定一个对象，所有输出值都加载到这个对象上：
bModule.js

let str = "ES6-Module";
function say() {
    console.log("hi")
}
export {str, say};

index.js

import * as obj from "./bModule";

console.log(obj.str);  // ES6-Module
obj.say();  // hi