我记得当我开始编码时，我会看到一些js文件使用require()来导入模块和其他文件使用import。这总是让我感到困惑，因为我并不真正理解其中的区别是什么，或者为什么项目之间存在不一致。如果您想知道同样的事情，请继续阅读！

什么是 CommonJS？

CommonJS 是一组用于在服务器端 JavaScript（主要是 Node.js 环境）中实现模块的标准。在这个系统中，模块是同步加载的，这意味着脚本执行将被阻塞，直到模块加载为止。这是一种简单的方法，但缺点是如果您尝试加载一堆不同的模块，则会影响性能，因为它们必须在其他模块运行之前一个接一个地加载。

使用 CommonJS 时，您可以使用 module.exports 导出功能并使用 require() 导入它。

这是代码中的示例。

// In file multiple.js

module.exports = function multiply(x, y) {
    return x * y;
};

// In file main.js

const multiply = require(‘./multiply.js’);

console.log(multiply(5, 4)); // Output: 20

什么是 ECMAScript (ES6)？

ES6，也称为 ECMAScript，是 2015 年发布的较新版本的 JavaScript。此版本提供了使用导入和导出语句异步导入模块的功能。这意味着您正在运行的脚本可以在加载模块时继续执行，因此不存在瓶颈。这也实现了一种称为“树摇动”的效率，我将在后面的文章中介绍这一点，但基本上，这意味着您只从正在使用的模块加载 JavaScript，并且不会加载死代码（未使用的代码）进入浏览器。这一切都是可能的，因为 ES6 支持静态和动态导入。

这是之前的相同示例，但这次我们使用导入和导出。

// In file multiply.js

export const multiply = (x, y) => x * y;

// In file main.js

import { multiply } from ‘./multiply.js’;

console.log(multiply(5, 4)); // Output: 20

主要区别：require 与 import

require() 是 CommonJS 模块系统的一部分，而 import 是 ES6 模块系统的一部分。您将看到 require() 在 Node.js 环境中用于服务器端开发，主要是在尚未采用 ES6 的遗留项目上。您将看到 import 在服务器端和前端开发中使用，尤其是较新的项目以及任何前端框架（如 React 或 Vue）。

为什么 import 比 require 更好？

正如我们之前提到的，导入是异步的，这可以带来更好的性能，特别是在大型应用程序中。此外，由于可以静态分析导入，因此 linter 和捆绑器等工具可以更有效地优化代码并实现树摇动，从而缩小捆绑包大小并加快加载时间。语法也比 require() 更容易阅读，这可以带来更好的开发人员体验，我们都希望如此！

什么时候使用 require 和 import

你会在以下情况下使用 require():

• 您正在开发一个旧版 Node.js 项目，该项目在 ES6 发布之前就已启动且尚未更新。

• 您需要在运行时动态加载模块，例如在配置文件中，或者如果您需要有条件地加载模块。

您会在以下情况下使用导入：

• 任何其他时间，因为这是现在的标准并且更高效。

概括

一般来说，建议尽可能使用 import，因为它提供更多好处，并且是更新、更广泛采用的模块系统。但是，在某些情况下，require() 可能仍然是更好的选择，具体取决于您的具体要求和您所在的环境。

如果您发现本文有帮助，请订阅我的时事通讯，我将每周将更多类似内容直接发送到您的收件箱！