require和import的区别

require和import的区别

在 JavaScript 中，require 和 import 都用于模块导入，但存在以下关键区别：

1. 语法规范

• require 是 CommonJS 规范 的实现，主要用于 Node.js 环境。
  示例：

  const fs = require('fs');
  

• import 是 ES6 模块规范（ECMAScript Modules）的标准语法，适用于现代浏览器和 Node.js（需配置）。
  示例：

  import fs from 'fs';
  

2. 加载机制

• require 是 运行时加载：
  模块在代码执行到该语句时才被加载，并返回整个模块对象。

  if (condition) {
    const module = require('./module'); // 动态加载
  }
  

• import 是 静态加载：
  模块在代码编译阶段解析，必须位于模块顶层（不能嵌套在条件语句中）。

  import module from './module'; // 必须全局作用域
  // 动态加载需用 import()
  if (condition) {
    import('./module').then(module => {...});
  }
  

3. 模块导出/导入方式

• require 支持 动态解构：
  可选择性获取模块的部分内容。

  const { funcA } = require('./module');
  

• import 提供更灵活的导入方式：
  • 默认导入：import defaultExport from 'module'
  • 命名导入：import { exportA } from 'module'
  • 重命名：import { exportA as alias } from 'module'
  • 整体导入：import * as module from 'module'

4. 输出特性

• CommonJS (require)：
  导出的是模块的 值拷贝（基本类型为复制，引用类型为共享地址）。
  修改模块内部变量不影响已导入的值。
• ES6 模块 (import)：
  导出的是 值的引用（即动态绑定）。
  模块内部变量变化会同步影响导入结果。

5. 执行顺序

• require 是 同步加载：
  阻塞后续代码执行，直到模块加载完成。
• import 是 异步加载：
  在编译阶段处理依赖，运行时无阻塞（通过 import() 动态加载时返回 Promise）。

6. 应用场景

• require：Node.js 传统项目、旧版浏览器（需 Babel 等工具转译）。
• import：现代前端框架（React/Vue）、浏览器原生支持的环境、Node.js（需 package.json 设置 "type": "module"）。

---

总结对比表

特性	require (CommonJS)	import (ES6 Modules)
规范	CommonJS	ECMAScript
加载时机	运行时动态加载	编译时静态解析
作用域	可嵌套在代码块中	必须位于模块顶层
输出类型	值拷贝	值引用（动态绑定）
同步/异步	同步加载	静态导入同步，动态导入异步
适用环境	Node.js 传统环境	现代浏览器、Node.js（需配置）

建议：

• 新项目优先使用 import（ES6 标准）。
• 旧项目或 Node.js 特定场景可沿用 require。
• 混合使用时需通过工具（如 Webpack/Babel）统一模块规范。