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

模块中的 this 指向 module.exports。

import

模块中的 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，现代项目可用 import（需配置 “type”: “module”）。
• 浏览器项目：优先使用 import（配合打包工具如 Webpack/Rollup）。
• 动态加载：require 更灵活，ES 模块用 import()。

如果需要兼容性，Babel/TypeScript 可以将 import 转译为 require。

附：import()函数适用场合

按需加载，如下 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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论