JS Module

三种模块规范：

• UMD
• CommonJS
• ES6 module

CommonJs

commonJS是node的模块化系统。主要语法为：module.exports、exports、require

导出：

模块导出：

//一个一个 导出

module.exports.age = 1

module.exports.foo = function(){}

exports.a = 'hello'



//整体导出

module.exports = { age: 1, a: 'hello', foo:function(){} }



//整体导出不能用`exports` 用exports不能在导入的时候使用

exports = { age: 1, a: 'hello', foo:function(){} }

这里需要注意 exports 不能被赋值，可以理解为在模块开始前exports = module.exports， 因为赋值之后exports失去了 对module.exports的引用，成为了一个模块内的局部变量

exports 和 module.exports 的区别

module.exports 默认值为{}

exports 是 module.exports 的引用

exports 默认指向 module.exports 的内存空间：module.exports 等同于 export default 可以用 import 引入

require() 返回的是 module.exports 而不是 exports

若对 exports 重新赋值，则断开了 exports 对 module.exports 的指向

 

es6 module

es6模块化主要是es6制定的，官方化，适用于浏览器端。主要语法使用：export，import

export * from 'module'; //重定向导出 不包括 module内的default

export { name1, name2, ..., nameN } from 'module'; // 重定向命名导出

export { import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出



export { name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出

export { variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出



export let name1 = 'name1'; // 声明命名导出 或者 var, const，function， function*, class



export default expression; // 默认导出 将expression赋值给default

export default function () { ... } // 或者 function*, class

export default function name1() { ... } // 或者 function*, class

export { name1 as default, ... }; // 重命名为默认导出

 

 

commonJs 和 esModule 的区别

• commonJs是被加载的时候运行，esModule是编译的时候运行
• commonJs输出的是值的浅拷贝，esModule输出值的引用
• commentJs具有缓存。在第一次被加载时，会完整运行整个文件并输出一个对象，拷贝（浅拷贝）在内存中。下次加载文件时，直接从内存中取值
• commonJS 导出是值拷贝，ES6 的 export default 导出也是值拷贝，export {} 导出才是引用绑定。