ES6模块化规范的简单使用

index.html:
<script src="../dist/bundle.js"></script>

app.js:
//引入模块
//使用解构的方式来获取模块中的暴露出内容
import { foo, bar } from "./modules/module1"
import { MODULE1_ARR } from "./modules/module1"
import { fun1, fun2 } from "./modules/module2"

import module3 from "./modules/module3"

foo()
bar()
console.log(MODULE1_ARR)

fun1()
fun2()

module3.foo()
module3.bar()

module1.js:
//分别暴露
export function foo() {
    console.log("module1 foo is called")
}

export let bar = function () {
    console.log("module1 bar is called")
}

export const MODULE1_ARR=["A","B"]

module2.js:
//统一暴露
function fun1() {
    console.log("module2 fun1 is called")
}

function fun2() {
    console.log("module2 fun2 is called")
}

function fun3() {
    console.log("module2 fun3 is called")
}

export { fun1, fun2 }

module3.js:

//默认暴露
// export default () => {
//     console.log("module3 中暴露出的箭头函数1")
// }

export default {
    msg: "module3 中的msg",
    foo() {
        console.log("module3 foo is called" + this.msg)
    },
    bar() {
        console.log("module3 foo is called")
    }
}