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

早先要想在前端做模块化开发，必须依赖第三方框架来实现，如：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 初始值也是 {}