🍉前端模块化

131 阅读1分钟

1. 使用模块作为出口

我们可以使用将需要暴露到外面的变量,使用一个模块作为出口

常见的模块化规范: CommonJS、AMD、CMD、也有ES6的Modules

2. CommonJS(了解)

CommonJS导出

module.exports = {
    flag: true,
    test(a, b) {
        return a + b
    }
}

CommonJS导入

let { test, flag } = require('moduleA');

以上代码只有在node.js环境下才起作用,在Webpack中会用到。

3. ES6模块化

3.1 export基本使用

//info.js
export let name="橙子"

//info.js
let name ="橙子"
export{name}

// export function test(content){
    console.log(content)
}

3.2 export default

某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以来命名。 这个时候就可以使用export default

// info.js
export default function(){
    console.log("default function")
}

import myFunc from "./info.js"
myFun()

export default 在同一个模块中,不允许同时存在多个

统一全部导入

import * as aaa from "./info.js"
console.log(aaa.flag)