require;required是什么意思

JavaScript 中 require 和 import 语句的区别

随着现代 Web 开发，我们要么使用 require 要么使用 import 引用 JavaScript 依赖项。有时，我们将两者结合使用。

但是，你知道为什么这两者都存在吗？ 使用一种或另一种时的最佳实践是什么？

在本文中，我将讨论使用 require 和 import 并回答其中一些常见问题。

在讨论 require 和 import 之前，有必要对 JavaScript 模块有一定的了解。 那么，让我们看看有哪些不同类型的 JavaScript 模块可用。

引入了 AMD 模块以使模块更加前端友好。 它们不需要任何打包器，并且所有依赖项都是动态解析的。

AMD使用 require 函数用于加载外部模块，并且能够充当 CommonJS 模块的包装器。

但是，随着 ES 模块的引入，AMD 的使用量急剧减少。

CommonJS 是 NodeJS 用来在模块中封装 JavaScript 的标准。 module.exports用于导出 CommonJS 模块，以及 import 函数用于将模块包含到单独的文件中。

尽管 CommonJS 模块在 NodeJS 中被广泛使用，但在前端开发中并没有使用它们。 这背后的主要原因是require函数的同步行为。

但是，NodeJS 从 v13 开始才开始支持 ES 模块。 在那之前，大多数 NodeJS 模块，包括 NPM 库，都是使用 CommonJS 模块开发的。

因此，CommonJS 模块仍然在开发人员中广泛使用。

而且，CommonJS 模块与 ES 模块同样重要，我将在本文接下来的部分中讨论更多。

UMD 是 AMD 和 CommonJS 的组合。 它使用了 AMD 的 CommonJS 语法和异步加载技术，使其适用于服务器端和客户端。

UMD 在 Webpack 等打包器中用作回退模块，下面显示了一个简单的 UMD 模块示例：

ES Modules (ECMAScript Modules) 是 JavaScript 中使用的官方标准。 ES 模块使用 import和 export 处理模块的语句。 它解决了 CommonJS 的最大限制之一，即同步加载。

在引入 ES Modules 之后，开发者之间有很多争论，考虑到与 CommonJS 的兼容性。 但是，开发人员已经适应使用这两种方法，我们将在接下来的部分中讨论更多详细信息。

已经了解了 JavaScript 模块的背景，那么让我们继续讨论 require 和 import.

require通常与 NodeJS 一起使用来读取和执行 CommonJS 模块。

这些模块可以是内置模块，如 http或自定义编写的模块。 使用 require，可以将它们包含在 JavaScript 文件中并使用它们的函数和变量。

但是，如果要使用 require 要获取本地模块，首先需要使用 module.exports 导出它们.

例如，假设您有一个名为 blogDetails.js，并且您需要使用该文件中的函数 index.js文件。

还可以使用一次导出多个模块 modules.export 如下：

注意： 如果最后不是使用 modules.export，可以附加 exports 。 例如： exports.getBlogContent = () => {};

我想现在你明白什么时候应该使用 require以及它是如何工作的。 接下来让我们看看如何 import 。 然后我们将能够以更深层次的理解来比较和对比它们。

import 是一个 ES 模块，并带有 export，它们被称为 ES6 import 和 export.

我们不能用 import 或导出到 ES 模块之外。

试图 import ES 模块之外是一个常见的开发人员错误。

如果我举同样的例子，我需要做的唯一改变就是修改 modules.export到 export default.

然后我们可以使用 import 将此文件包含在我们的 index.js文件。

注意： 类似于 require，还可以通过将导出附加到每个函数定义来单独导出每个函数。

例如： export const = getBlogContent = () => {};

所以，我想你现在明白应该如何以及何时使用 require和 import。但是，这还不是全部； 它们的功能和用法存在一些显着差异。 是时候进行比较了。

require 和 import 都用于包含模块。 但是它们有几个应该注意的重要功能。

import 语句只能在文件的开头定义。 定义一个 import 其他地方的语句会给你一个错误或自动转移到文件的开头。

声明 require 时，当加载的模块名称未预定义时，允许有条件地或动态地加载模块。

例如，你可以调用 require 在函数或 if 条件中，如下所示：

require语句具有这种灵活性，因为它们被视为函数。 它们在运行时被调用，在此之前没有办法知道任何事情。 但， import 语句是静态的，我们不能有条件地或动态地使用它们。

注意： 由于 import 语句是静态的，所以可以在运行应用程序之前检测到任何错误

在小型应用程序中，同步或异步可能不会发挥主要作用。 但是，如果我们考虑大型应用程序，则会使用数百个模块。 所以，如果你使用 require, 模块将被一 一加载和处理。

而 import 语句通过异步工作解决了这个问题，这比 require 在大规模应用中更能发挥作用。

正如我们所讨论的，ES 模块系统是作为维护客户端 JavaScript 模块的标准引入的。 TypeScript 也采用了它，并添加了用于定义 Type 的内容。 因此，我不认为 require可以再次取代 ES，因为它已成为开发人员中广泛使用的标准。

但是由于有大量的 NodeJS 模块和库是用 CommonJS 编写的，我们不能保留 require完全放在一边。 所以我们必须相应地使用它们。

如果你使用的是 TypeScript，则可以通过配置 tsconfig.json文件。 例如，假设我们需要输出一个使用 CommonJS 的代码版本。

需要做的就是创建一个新的 tsconfig 通过扩展原始文件用于 CommonJS 输出 tsconfig文件并修改 module下参数 CompilerOptions.

注意： 还可以使用 Webpack 等构建工具将 ES 模块转换为 CommonJS 模块。

以下表格为比较两者

不够理解import和require导入的区别被diss惨了

作者：天天鸭

前言

在真实工作中，估计 import 和 require 大家经常见到，如果做前端业务代码，那么 import 更是随处可见了。但我们都是直接去使用，但是这两种方式的区别是什么呢？应用场景有什么区别呢？

大部分能说出来 import 是 ES6 规范，而 require 是 CommonJS 规范，然后面试官深入问你两者编译规则有啥不一样？然后就不知道了

本文一次性对 import 和 require 的 模块基本概念 、 编译规则 、 基本用法差异 、 生态支持 和 性能对比 等 5 个方面一次理清总结好，下次遇到这种问题直接举一反三。

（顺便吆喝一句，技术大厂，前后端测试捞人，感兴趣来看 这里 ）

一、模块基本概念 require ： 是 CommonJS 模块规范，主要应用于 Node.js 环境。 import ：是 ES6 模块规范，主要应用于现代浏览器和现代 js 开发 (适用于例如各种前端框架)。

二、编译规则 require ： require 执行时会把导入的模块进行缓存，下次再调用会返回同一个实例。 在 CommonJS 模块规范中， require 默认 是同步的。当我们在某个模块中使用 require 调用时，会等待调用完成才接着往下执行，如下例子所示。

模块 A 代码

模块 B 代码

打印顺序，会按顺序同步执行

注意 ： require 并非绝对是同步执行，例如在 Webpack 中能使用 require.ensure 来进行异步加载模块。 import ：

但是....， 通过 import（） 动态引入是异步的哦，并且是在执行中加载的。 import() 在真实业务中是很常见的，例如路由组件的懒加载 component: () => import('@/components/dutest.vue') 和动态组件 const MyTest = await import('@/components/MyTest.vue'); 等等， import() 执行返回的是一个 Promise ，所以经常会配合 async/await 一起用。

三、基本用法差异 require ： 一般不直接用于前端框架，是用于 Node.js 环境和一些前端构建工具（例如： Webpack ）中

1. 导入模块 (第三方库) 在 Node.js 中经常要导入各种模块，用 require 可以导入模块是最常见的。例如导入一个 os 模块

2. 导入本地写好的模块 假设我本地项目有一个名为 utils.js 的本地文件，文件里面导出一个 add 函数

在其它文件中导入并使用上面的模块

import ： 一般都是应用于现在浏览器和各种主流前端框架（例如： Vue\react ）

1. 静态引入（项目中最常用） 这种情况一般适用于确定的模块关系，是在编译时解析

2. 动态引入 其实就是使用 import() 函数去返回一个 Promise ，在 Promise 回调函数里面处理加载相关，例如路由的懒加载。

或者动态引入一些文件（或者本地的 JSON 文件）

四、生态支持 require ：

import ：