ES6的模块暴露与模块引入

ES6的模块暴露与模块引入

一、总结

一句话总结：

ES6的模块暴露和引入可以让我们实现模块化编程，export或export default暴露，import引入变量

1、ES6三种模块暴露方法？

1、多行暴露：多个export

2、统一暴露：export暴露多个：export {foo,bar}

3、默认暴露：export default 方式

2、ES6中引入模块的方式只有一个？

import：import module3 from '.js/src/module3.js'

二、ES6的模块暴露与模块引入

转自或参考：ES6的模块暴露与模块引入
https://www.cnblogs.com/yuanchao-blog/p/10985884.html

ES6的模块暴露和引入可以让我们实现模块化编程，以下列出ES6的几种模块暴露与引入的方式与区别。

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

• 多行暴露

模块1：module1.js

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

export function bar() {
    console.log('bar() moudle1')
}

• 统一暴露

模块2： module2.js

function fun1() {
    console.log('fun1() module2')
}

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

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

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

• 默认暴露

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

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

// 引入模块3
import module3 from '.js/src/module3.js'

// 使用模块
module3.foo()
module3.bar()