Commin.js与ES6模块化

CommonJS

1.通过module.exports 导出（向外暴露的唯一方式）

2.使用require进行导入    如果导入的模块再次被加载，直接导出第一次被加载的时执行的内容 

即缓存值

ES6模块

1.通过exports导出

2.命名导出/批量 exports { a , b }   -----   默认导出 exports default a (每次导出一个)

export {  nikename  as  name  }

3.通过import 导入  可以使用as重命名  

4.在浏览器中使用module ，引入相同的 nomodule 脚本会被执行多次,而模块只会被执行一次:

moudle对象.loaded 判断是否执行过

如 import * as 

CommonJS 与ES6模块的区别

CommonJS 对模块依赖的解决是动态的，而ES6模块是静态的  

模块导入时，commin.js 是值拷贝，ES6模块则为只读的动态映射

动态：模块的依赖关系建立在代码运行阶段
静态：模块的依赖关系建立在代码编译阶段

common.js 可以动态导入模块，使用 if 语句引入不同的模块

CommonJS 模块的 require() 是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的模块依赖的解析阶段

转化

es6模块

// a.js

export default function () {
  console.log("hello world");
}
//  index.js 
import a from "./a.js";   // 默认导出可以自由命名
a();   "hello world"

转换为common JS模块

//  a.js
module.exports = function(){
  console.log("hello world");
}
// index.js 

const a = require("./a.js");
a();

export { a ,b }

//  a.js
const a = {
  name: "mingyong.g",
};

const fun = function () {
  console.log("hello world");
};

export { a, fun };
//  index.js
import { a, fun } from "./a.js";  // 导入时名字必须和导出时的命名一致
console.log(a);   //"mingyong.g"
fun();    //"hello world"

common.js

// a.js
const a = {
  name: "mingyong.g",
};

const fun = function () {
  console.log("hello world");
};

module.exports = {
  a,
  fun,
};

// 或者使用下面这种方式导出
//批量导出
module.exports.a = a;
module.exports.fun = fun;
// index.js 
const module = require("./a.js")   // 导入的是一个整体,是{a:a,fun:fun}形式
const a = module.a;
const fun = module.fun;

总结

common.js导入的是一份值拷贝，允许对导入 的值进行修改，不会影响原模块的数据，出现某个模块被“循环加载”，就只输出已经执行的部分，没有执行的部分不会输出。

moudlue 导出的值为动态映射，且值为只读，遇到模块加载命令import时不会去执行模块，只是生成一个指向被加载模块的引用。

Node导出的本质是导出moudle.exports对象