本地运行Gulp报错ReferenceError: require is not defined如何解决？

你对报错原因的理解存在偏差，这个ReferenceError: require is not defined和客户端JavaScript完全无关，是本地Node执行Gulp配置文件时的规范不匹配问题，不需要引入browserify这类工具，解决方法非常简单。

报错解决方法 #

分两种可选方案：

方案1：沿用CommonJS规范（最省事） #

你只需要删除项目根目录package.json文件中的"type": "module"配置项即可。Node默认会采用CommonJS规范解析JS文件，require语法就能正常识别，不需要做任何额外修改，直接重新执行gulp hello就能正常运行。

方案2：适配ES模块规范 #

如果你需要项目全局启用ES模块规范，可以做两处修改即可：

• 将Gulp配置文件的后缀从.js改为.mjs
• 将配置文件中所有require写法替换为ES模块的import语法，示例如下：

// 原CommonJS写法
const gulp = require('gulp')
const sass = require('gulp-sass')(require('sass'))

// 替换为ES模块写法
import gulp from 'gulp'
import dartSass from 'sass'
import gulpSass from 'gulp-sass'
const sass = gulpSass(dartSass)

修改后重新执行Gulp命令即可正常运行。

更适合简单项目的轻量化工作流替代 #

如果不想维护Gulp配置，以下工具的使用成本更低，完全可以覆盖SCSS编译、JS压缩的需求：

• Vite：内置SCSS编译、代码压缩、热更新能力，创建纯静态项目后不需要写任何构建配置，执行npm run build即可直接生成可直接上传的生产环境代码，配置成本远低于Gulp。
• Parcel：零配置前端构建工具，不需要编写任何配置文件，安装后直接指定入口HTML文件，自动完成SCSS编译、资源压缩、依赖打包的全流程，适合极简场景使用。
• 原生Node脚本：如果项目逻辑特别简单，可以直接写几行JS脚本调用sass、terser等官方库完成编译压缩，不需要引入完整的构建工具链。

内容的提问来源于stack exchange，提问作者Sid