一文让你彻底搞清楚JavaScript中的require、import与export

在当前的JavaScript标准中，有两种方式可以导入和导出模块：CommonJS 的 require() 和 module.exports，以及 ES6 的 import 和 export。

CommonJS 的 require() 和 module.exports

在 CommonJS 中，模块使用 require() 函数来导入，然后使用 module.exports 对象来导出模块。

导入模块

通过 require() 导入模块时，可以使用相对路径或绝对路径指定需要导入的模块。例如，如果要导入 "foo.js" 模块，可以使用以下代码：

const foo = require('./foo');

如果要导入 "bar.js" 模块，可以使用以下代码：

const bar = require('../bar');

导出模块

通过 module.exports 导出模块时，可以将任意类型的 JavaScript 对象导出为模块。例如，以下是一个简单的模块，它将一个函数作为模块导出：

// math.js
const add = (a, b) => a + b;
module.exports = add;

示例

下面是一个使用 CommonJS 的示例，它从一个模块中导入函数并将其用于计算：

// main.js
const add = require('./math');
const result = add(2, 3);
console.log(result); // 输出 5

ES6 的 import 和 export

在 ES6 中，使用 import 和 export 关键字来导入和导出模块。

导入模块

通过 import 导入模块时，需要指定需要导入的模块名称和路径。例如，以下代码导入 "foo.js" 模块：

import foo from './foo';

如果要导入 "bar.js" 模块，可以使用以下代码：

import bar from '../bar';

导出模块

通过 export 关键字导出模块时，需要指定导出的 JavaScript 对象。例如，以下是一个简单的模块，它将一个函数作为模块导出：

// math.js
export const add = (a, b) => a + b;

示例

下面是一个使用 ES6 的示例，它从一个模块中导入函数并将其用于计算：

// main.js
import { add } from './math';
const result = add(2, 3);
console.log(result); // 输出 5

需要注意的是，使用 ES6 中的 import 和 export 关键字时，需要使用兼容 ES6 的浏览器或使用编译器将 ES6 代码编译为 ES5 代码，才能在不支持 ES6 的浏览器中运行。

总结

本文介绍了 CommonJS 的 require() 和 module.exports，以及 ES6 的 import 和 export。两种方式都可以用于导入和导出模块，但语法略有不同。建议在使用时，根据实际情况选择使用哪种方式。