JavaScript 中 require 和 import 的核心区别与使用场景

在 JavaScript 开发中，模块导入主要涉及 require 和 import 两种语法，它们分别对应不同的模块规范，在行为和使用方式上存在显著差异。

1. 模块系统不同

require

这是 CommonJS 模块系统的标准语法，也是 Node.js 环境的默认实现方式。基本用法为 const module = require('./module')。

• 动态加载：模块在代码执行到该语句时同步加载。
• 文件类型支持广泛，可导入 .js、.json 等多种格式文件。
• 导出机制：模块通过 module.exports 或 exports 对象进行导出。

import

这是 ES6 模块系统（ECMAScript 2015 及后续标准）的语法。基本用法为 import module from './module.js'。

• 静态加载：依赖关系在代码解析阶段（编译时）即已确定。
• 文件类型支持：默认支持 .js、.mjs 文件，或通过 package.json 中设置 “type”: “module” 来启用。
• 导出机制：导出值为只读的静态绑定，具体值在编译时确定。

2. 加载时机

require

• 同步加载：模块仅在代码执行流到达 require 语句时才被加载，这可能导致后续代码执行阻塞。
• 支持条件导入：允许在条件判断语句中调用，例如 if (condition) { require(…) }。

import

• 静态加载：模块依赖在编译阶段确定，无法直接动态导入（但可通过 import() 函数实现动态加载）。
• 作用域限制：必须位于顶层作用域，不能直接放在条件语句或函数内部（除非使用 import() 语法）。

3. 语法差异

require

const fs = require('fs'); // 导入整个模块
const { readFile } = require('fs'); // 解构导入

import

import fs from 'fs'; // 默认导入
import { readFile } from 'fs'; // 命名导入
import * as fs from 'fs'; // 导入所有命名导出
import fs from 'fs/promises'; // 导入子模块（路径需完整）

4. 动态导入

require

直接内联使用，无需额外语法支持。

import

通过 import() 函数实现动态导入，该函数返回一个 Promise 对象。

const module = await import('./module.js');

5. 顶层 this 行为

require

在 CommonJS 模块中，this 指向 module.exports。

import

在 ES6 模块中，this 为 undefined（遵循严格模式）。

6. 使用环境

require

主要应用于 Node.js 环境（传统项目），或通过 Babel、Webpack 等工具转译后的浏览器代码。

import

现代浏览器原生支持（需声明 type=“module”），Node.js 从 v12 版本开始也支持 ES 模块（需文件后缀为 .mjs 或在 package.json 中配置）。

7. 缓存机制

require

模块首次加载后会被缓存，后续再次 require 时直接读取缓存内容。

import

同样存在缓存机制，但由于静态分析特性，其依赖确定行为更为严格。

如何选择？

• Node.js 项目：传统项目通常使用 require，现代项目若配置了 “type”: “module” 则可使用 import。
• 浏览器项目：优先使用 import（配合 Webpack、Rollup 等打包工具）。
• 动态加载：require 更为灵活，ES 模块需使用 import()。

如果需要兼容性，可通过 Babel 或 TypeScript 将 import 转译为 require。

附：import()函数适用场合

按需加载：例如在事件监听函数中引入模块，只有当用户点击按钮时才会加载该模块。

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

条件加载：import() 可置于 if/else 语句中，实现基于条件的模块加载。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

总结

本文介绍了 JavaScript 中 require 与 import 的主要区别，更多相关 js 中 require 和 import 区别内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！