一文了解 import, export, exports, module.exports, require，轻松掌握 CJS 和 ESM

前端

2023-10-12 02:22:19

一、import、export、exports 和 module.exports

import：用来导入其他模块的变量、函数或类。

export：用来导出其他模块可以访问的变量、函数或类。

exports：是一个对象，用于存储导出的变量、函数或类。

module.exports：是一个变量，指向导出的对象。

二、CJS 和 ESM

CJS：CommonJS 是一个模块系统，用于在 Node.js 中导入和导出模块。

ESM：ECMAScript Module 是一个模块系统，用于在浏览器中导入和导出模块。

三、import、export、exports 和 module.exports 的区别

import 和 export 是 ES6 中引入的模块系统，而 exports 和 module.exports 是 CommonJS 中的模块系统。

import 和 export 都是，而 exports 和 module.exports 是对象。

import 和 export 用于导入和导出变量、函数或类，而 exports 和 module.exports 用于存储导出的变量、函数或类。

四、CJS 和 ESM 的区别

CJS 是一个同步模块系统，这意味着导入模块时，会立即执行模块代码。

ESM 是一个异步模块系统，这意味着导入模块时，不会立即执行模块代码，而是等到需要使用模块时才执行。

CJS 模块的扩展名为 .js，而 ESM 模块的扩展名为 .mjs。

五、使用 import、export、exports 和 module.exports 的示例

// CJS
// 导出变量
exports.name = 'John';

// 导出函数
exports.sayHello = function() {
  console.log('Hello!');
};

// 导入变量和函数
var name = require('./name.js').name;
var sayHello = require('./name.js').sayHello;

// ESM
// 导出变量
export const name = 'John';

// 导出函数
export function sayHello() {
  console.log('Hello!');
}

// 导入变量和函数
import { name, sayHello } from './name.js';