CommonJs模块规范和ES6模块规范

曾经终败给现在 2022-10-27 02:30 350阅读 0赞

引用 [https://blog.csdn.net/zhushikezhang/article/details/79667870][https_blog.csdn.net_zhushikezhang_article_details_79667870]

**前述：**

模块化规范中，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

首先我们要明白一个前提，CommonJS模块规范和ES6模块规范完全是两种不同的概念。

**一.CommonJS模块：**

模块输出方式：exports 和 module.exports

模块输入方式：require

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

Node应用由模块组成，采用CommonJS模块规范。

1.  `var x = 5;`
2.  `var addX = function (value) {`
3.  `return value + x;`
4.  `};`
5.  `module.exports.x = x;`
6.  `module.exports.addX = addX;`

上面代码通过module.exports输出变量x和函数addX。

require方法用于加载模块。

1.  `var example = require('./example.js');`
2.  `console.log(example.x); // 5`
3.  `console.log(example.addX(1)); // 6`

为了方便，Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;

于是我们可以直接在 exports 对象上添加方法，表示对外输出的接口，如同在module.exports上添加一样。注意，不能直接将exports变量指向一个值，因为这样等于切断了exports与module.exports的联系。

**二.ES6模块：**

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的`require`、Python 的`import`，甚至就连 CSS 都有`@import`，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

ES6模块输出方式：export  和 export default

ES6模块输入方式：import ... from ...

不同于CommonJS，ES6使用 export 和 import 来导出、导入模块。

1.  `// profile.js`
2.  `var firstName = 'Michael';`
3.  `var lastName = 'Jackson';`
4.  `var year = 1958;`
5.  `export {firstName, lastName, year};`

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

1.  `// 写法一`
2.  `export var m = 1;`
3.  `// 写法二`
4.  `var m = 1;`
5.  `export {m};`
6.  `// 写法三`
7.  `var n = 1;`
8.  `export {n as m};`

使用export default命令，为模块指定默认输出

1.  `// export-default.js`
2.  `export default function () {`
3.  `console.log('foo');`
4.  `}`

相关链接：  
CommonJS规范，[点击打开链接][Link 1]  
ES6 Module 的语法，[http://es6.ruanyifeng.com/\#docs/module][http_es6.ruanyifeng.com_docs_module]

[https_blog.csdn.net_zhushikezhang_article_details_79667870]: https://blog.csdn.net/zhushikezhang/article/details/79667870
[Link 1]: http://javascript.ruanyifeng.com/nodejs/module.html
[http_es6.ruanyifeng.com_docs_module]: http://es6.ruanyifeng.com/#docs/module