64、js 中require和import有何区别?

发布于:2025-06-08 ⋅ 阅读:(20) ⋅ 点赞:(0)

在 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。

在这里插入图片描述