ES6模块化管理使用和commenjs简单介绍

你的名字 2023-02-20 06:55 16阅读 0赞

早先要想在前端做模块化开发，必须依赖第三方框架来实现，如：requireJS（AMD规范的起源）和seaJS（CMD规范的起源）。因两者功能高度重合，后来seaJS不再维护。直到ES6的出现，迅速成为前端和服务器端通用的模块解决方案。

## ES6 ##

ES6的模块化分为导出（export）与导入（import）两个模块。它把一个文件当作一个模块，每个模块有自己独立租用与。外部要想读取模块当中的内容，就需要使用export将其暴露（输出）。

### 基本使用 ###

//myModule.js
    
    //export后只能跟function、class、var、let、const、default、{}
    //export作用：给当前“模块对象”添加属性
    
    export var name = 'test';//导出较少时推荐此方法
    
    /******************myModule结束*************************************/
    
    //a模块引入myModule模块
    import { name } from "./myModule"//后缀可省略
    console.log(name);//test

### as重命名 ###

避免导出名与当前模块变量命名起冲突等原因，需要改导出属性名，此时关键字“as”可实现该需求

import { name as myName } from "./myModule"//as指定接收的名字
    console.log(myName );//test

### 多变量输出 ###

多变量输出，可以将这些变量包装成对象进行**模块化**输出

//myModule.js
    let myName = "test";
    let myAge = 60;
    let myfn = function(){
        return "我叫" + myName + "，今年" + myAge + "岁"
    }
    
    export {
        myName,
        myAge,
        myfn
    }
    
    /******************myModule结束*************************************/
    //a模块引入myModule模块
    
    import { myfn,myAge,myName } from "./test.js";
    console.log(myfn());//我叫test，今年60岁
    console.log(myAge);//60
    console.log(myName);//test

也可以直接**导出整个模块**，使用\*和as或者使用模块的default属性

方法1

import * as info from "./test.js";//通过*来批量接收，as 来指定接收的名字
    console.log(info.myfn());//我叫test，今年60岁
    console.log(info.myAge);//60
    console.log(info.myName);//test

方法2

//myModule.js
    let myName = "test";
    let myAge = 60;
    let myfn = function(){
        return "我叫" + myName + "，今年" + myAge + "岁"
    }
    
    export default{
        myName,
        myAge,
        myfn
    }
    
    /********myModule结束**************/
    //a模块引入myModule模块
    
    import myObj from "./myModule"
    console.log(myObj.myName)//test
    console.log(myObj.myfn());//我叫test，今年60岁

### 混合导出 ###

//myModule.js
    let myfn = function(){
        return "我叫" + myName + "，今年" + myAge + "岁"
    }
    
    export default{ myfn }
    export let myName = "test";
    
    /********myModule结束**************/
    //a模块引入myModule模块
    
    import myfn,{ myName } from "./myModule"
    console.log(myName)//test
    console.log(myfn());//我叫test，今年60岁

### CommonJS ###

Node中使用的模块化解决方案。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

//a.js
    var a = 1；
    var addA = function(value){
        return value + a;    
    }
    
    module.exports.a = a;
    module.exports.addA = addA;
    
    //b.js引入a.js
    
    var obj = require('./a.js');
    console.log(example.a); // 1
    console.log(example.addA(1)); // 2

module.exports与exports的区别

exports = module.exports = \{\}，exports 是 module.exports 的一个引用。

*  require 引用模块后，返回的是 module.exports 而不是 exports。
 *  exports.xxx 相当于在导出对象上挂属性，该属性对调用模块直接可见
 *  module.exports 初始值为一个空对象 \{\}，所以 exports 初始值也是 \{\}