当前位置：首页 > news >正文

#关于require 与 import 相关了解

news 来源：原创 2025/5/18 2:09:18

📦 require 在前端项目中使用，属于 CommonJS 模块规范 的语法，主要用于 Node.js 环境。早期的前端模块打包工具（如 Webpack）会兼容这种写法，但在现代前端项目（如 Vue、React）中，默认推荐使用的是 ES Module（import）语法。

🧠 一句话理解：

require() 是在运行时加载模块（CommonJS），而 import 是在编译时加载模块（ES Module）。

🔍 1. 前端项目中使用 `require` 的情况

✅ 可以用的场景：

Node 环境代码段
比如：处理文件、读取配置等 Node-only 的代码。
```
const fs = require('fs');
```
Webpack 打包时兼容处理某些模块（动态引入）
```
const config = require('./config.json');
```
某些旧版工具链（比如：使用了 webpack、babel 没开启 ESModule 支持）
Vue 组件中，使用 require 加载图片（特殊写法）
```
<img :src="require('@/assets/logo.png')" />
```

⚠️ 不建议的地方：

现代框架如 Vite + Vue 3、React + CRA（Create React App），默认使用 ESModule（import），如果你写 require()，可能会：

💥 报错：“require is not defined”
💥 报错：“Cannot use require outside a module”

🔄 推荐替代写法（用 import 替代 require）：

// CommonJS
const config = require('./config.js');

// ES Module 推荐写法
import config from './config.js';

💡 总结区别对照表

特性	`require`（CommonJS）	`import`（ESModule）
加载时机	运行时	编译时（静态分析）
是否支持动态加载	支持	支持（需用 `import()`）
是否异步	否（同步）	是（动态 import 异步）
当前流行程度	Node 用得多	前端主流、未来趋势

✅ 小建议（给你这样的前端同学）：

前端项目（特别是 Vue + Vite），请优先使用 import。
如果你遇到 require is not defined，要考虑是不是环境不对（如运行在浏览器而不是 Node）。

💡一个 Vue 项目既是“前端项目”，又会部分运行在 Node 环境，但两者要清晰分开看：

🧩 一句话理解：

✅ Vue 开发/构建阶段：会用到 Node（比如 Vite、Webpack）。
❌ Vue 项目运行在浏览器中时：不是 Node 环境，不能用 require()、fs 等 Node 模块。

📦 Vue 项目的两个阶段

① 开发阶段（Node 环境）

当你运行这些命令时，其实就是 Node 在工作：

npm install
npm run dev
npm run build

这些命令调用的是 Node 脚本（比如 vite.config.js、webpack.config.js），这些配置文件中可以用 require() 或 Node 原生模块（如 fs、path）。

🔧 比如：

// vite.config.js
const path = require('path');  // ✅ 这里是 Node 环境

② 浏览器运行阶段（非 Node 环境）

一旦构建完成，你的 Vue 项目最终运行在 浏览器中，这时候：

❌ require() 不可用（浏览器里没有）
❌ fs、path 等 Node 模块也不可用
✅ import 语法可以（经过构建工具转换后）

👀 举个具体例子：

// 在浏览器 Vue 组件中（非 Node 环境）
<script setup>
import config from './config.js'  // ✅ 推荐写法
// const config = require('./config.js') ❌ 这会报错：require is not defined
</script>