[CommonJS 模块 - require/exports] 和 [ES6 模块 - import/export] 的用法

原创已于 2022-06-16 16:36:48 修改 · 751 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #node.js

于 2022-06-14 18:38:44 首次发布

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

node

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的两种模块系统：CommonJS和ES6模块。CommonJS通过require()和module.exports进行导入和导出，而ES6模块则使用import和export。文章对比了两者的语法差异，并提供了实际代码示例，包括模块加载方法，如.mjs和.cjs文件的处理。此外，还讨论了如何在实际项目中选择合适的模块系统。

模块最大的好处是大大提高了代码的可维护性
使用模块还可以避免函数名和变量名冲突

JavaScript 现在有两种模块。一种是 ES6 模块，简称 ESM；另一种是 CommonJS 模块，简称 CJS。
CommonJS 模块是 Node.js 专用的，与 ES6 模块不兼容。语法上面，两者最明显的差异是：

CommonJS 模块使用 require() 和 module.exports
ES6 模块使用 import 和 export

require/exports 用法

const fs = require('fs');
exports.fs = fs;
module.exports = fs;

注：不可以直接对 exports 赋值，如 ~~exports = { name: 'Hello', alia: 'World' }~~

// /src/a.js
module.exports = {
	name: 'Hello',
	alia: 'World'
};
// 等同于
exports.name = 'Hello';
exports.alia= 'World';

// /src/b.js
const aModule = require('./a');
console.log('aModule:', aModule); // { name: 'Hello', alia: 'World' }

module.exports 把函数作为模块的输出暴露

// /src/a.js
module.exports = function() {
	return {
		name: 'Hello',
		alia: 'World'
	};
};

// /src/b.js
const aModule = require('./a')();
console.log('aModule:', aModule); // { name: 'Hello', alia: 'World' }

import/export 用法

import fs from 'fs';
import { readFile } from 'fs'; // 从 fs 导入 readFile 模块
import { default as fs } from 'fs'; // 从 fs 中导入使用 export default 导出的模块
import * as fileSystem from 'fs'; // 从 fs 导入所有模块，引用对象名为 fileSystem
import { readFile as read } from 'fs'; // 从 fs 导入 readFile 模块，引用对象名为 read

export default fs;
export const fs;
export function readFile;
export { readFile, read };
export * from 'fs';

模块加载方法

.mjs 文件总是以 ES6 模块加载。
.cjs 文件总是以 CommonJS 模块加载。
.js 文件的加载取决于 package.json 中的 "type": "module" ，则会被解释成 ES6 模块。
```
// package.json
{
   "type": "module"
}
```