ES6模块暴露与模块引入的一点理解

提示：点击右上角关注博主，收获共同话题

---

大家好，好男人就是我，我就是小陈同学。

1、ES6模块暴露与模块引入

1-1、ES6一共有三种模块暴露方法

(1)统一暴露

模块 module1：module1.js

function fun1() {
    console.log('fun1() module1')
}
 
function fun2() {
    console.log('fun2() module1')
}
// 统一暴露
export {foo,bar}

(2)分别暴露

模块 module2：module2.js

//多行暴露
export function foo() {
    console,console.log('foo() module2');
}
 
export function bar() {
    console.log('bar() module2')
}

以上两种向外暴露方式在主文件引入时必须使用对象的解构赋值引用（不能使用变量接收的方式来映入）

主模块：main.js

import {foo,bar} from '.js/src/module2.js'
import {fun1,fun2} from './js/src/module1.js'

(3)默认暴露

export default {
    foo() {
        console.log('默认暴露方式')
    },
    bar() {
        console.log('默认暴露')
    }
}

默认暴露的方式只允许有一个: export default {}且在主模块引入时可以使用定义变量来接收的方式！

// 引入模块3
import module3 from '.js/src/module3.js'
 
// 使用模块
module3.foo()
module3.bar()

1-2、总结

• 对外暴露出的都是一个对象，但是不同的暴露方法实际暴露的对象有所不同
• 默认并暴露的实质就是使用 export ➕ 去除import关键字后的引入写法
• 默认暴露在进行引入并暴露时不能进行简写
• import引入的文件会自动收集在文件的最上方，并按照引入的顺序执行