前端开发同学们在不同的项目会遇到不同的导入方式有时候项目用import，有时候用 require。这两者到底啥区别，今天这篇文章就来说清楚。

import 和 require 是 JavaScript 中两种不同的模块导入方式，它们分别用于不同的模块系统。以下是它们的区别和用法的详细解释：

require - CommonJS 模块系统

特点：

• 同步加载：在 Node.js 中，require 是同步加载模块的。当执行到 require 语句时，会立即加载并执行模块代码。
• 返回值：require 返回模块的导出对象，可以直接使用。
• 动态导入：可以在代码的任何位置动态地导入模块，不受位置限制。
• 适用环境：主要用于 Node.js 和一些早期的前端打包工具（如 Browserify）。

用法示例：

// 导入模块
const moduleA = require('moduleA');

// 使用模块中的方法或属性
moduleA.someFunction();

导出模块：

// moduleA.js
function someFunction() {
  console.log('Hello from moduleA');
}

module.exports = {
  someFunction
};

import - ES6 模块系统

特点：

• 静态加载：import 是静态加载模块的。在代码编译阶段，会分析并加载模块，而不是在运行时。
• 返回值：import 导入的是模块的绑定（binding），而不是直接返回模块的导出对象。这意味着导入的变量是模块内部变量的直接引用，而不是复制。
• 必须在模块顶层：import 语句必须位于模块的顶层作用域，不能在函数或代码块内部使用。
• 适用环境：主要用于现代浏览器和前端打包工具（如 Webpack、Rollup）。

用法示例：

// 导入整个模块
import * as moduleA from 'moduleA';

// 使用模块中的方法或属性
moduleA.someFunction();

// 导入模块中的特定成员
import { someFunction } from 'moduleA';

// 使用导入的方法
someFunction();

导出模块：

// moduleA.js
export function someFunction() {
  console.log('Hello from moduleA');
}

总结

• 加载方式：require 是同步加载，import 是静态加载。
• 导入方式：
• require 导入整个模块，返回模块的导出对象。
• import 可以导入整个模块，也可以导入模块中的特定成员。
• 导出方式：
• require 使用 module.exports 导出模块。
• import 使用 export 关键字导出模块中的成员。
• 使用场景：
• require 适用于 Node.js 和一些早期的前端打包工具。
• import 适用于现代浏览器和前端打包工具，是 ES6 标准中的模块导入方式。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。