JavaScript 中的 require 与 import 区别

我记得刚开始写代码的时候，经常看到一些 js 文件使用 ` require()import` 来导入模块，而另一些文件则使用 `import` import。这总是让我很困惑，因为我不太明白它们之间的区别，也不明白为什么不同项目之间会有不一致的情况。如果你也有同样的疑问，那就继续往下读吧！

什么是 CommonJS？

CommonJS 是一套用于在服务器端 JavaScript（主要是 Node.js 环境）中实现模块的标准。在这个系统中，模块是同步加载的，这意味着脚本的执行会被阻塞，直到模块加载完成。这种方法虽然简单直接，但缺点是如果尝试加载多个不同的模块，性能会受到影响，因为它们必须依次加载才能运行其他代码。

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

以下是代码示例。

// 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，是 JavaScript 的一个新版本，于 2015 年发布。该版本引入了使用 `import`import和 `import`export语句异步导入模块的功能。这意味着在模块加载期间，当前脚本可以继续执行，从而避免性能瓶颈。这还带来了一种称为“摇树优化”（tree-shaking）的效率优化方法，我将在后续文章中详细介绍。简而言之，这意味着你只会加载正在使用的模块中的 JavaScript 代码，而不会将死代码（未使用的代码）加载到浏览器中。这一切都得益于 ES6 对静态导入和动态导入的双重支持。

这是之前那个例子，但这次我们使用了importand export。

// 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 更好？

正如我们之前提到的，import它是异步的，这可以带来更好的性能，尤其是在大型应用程序中。此外，由于import可以进行静态分析，像代码检查器和打包工具这样的工具可以更有效地优化代码并实现摇树优化，从而减小打包体积并加快加载速度。它的语法也更易于阅读，require()这能带来更好的开发者体验，而这正是我们都想要的！

何时使用 require，何时使用 import

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

• 你正在开发一个遗留的 Node.js 项目，该项目是在 ES6 发布之前启动的，并且一直没有更新。

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

你会在以下情况下使用import：

• 其他时间都可以，因为这已成为标准做法，而且效率更高。

概括

一般来说，建议import尽可能使用模块化系统，因为它优势更多，而且是更新、应用更广泛的模块化系统。但是，require()根据您的具体需求和工作环境，在某些情况下，其他方案可能仍然是更好的选择。

如果您觉得这篇文章对您有帮助，请订阅我的电子报，我会每周直接向您的邮箱发送更多类似的内容！