浏览器端Node模块项目遇Uncaught ReferenceError: require is not defined问题求解

这个问题的核心很明确：浏览器本身并不支持Node.js的require模块加载语法，你虽然已经配置了Webpack，但大概率是没有正确使用它来处理代码打包，或者直接在浏览器里运行了未打包的源文件。下面给你两种可行的解决思路：

思路1：正确使用Webpack打包/运行代码 #

你已经写好了Webpack配置，接下来只需要按步骤执行：

1. 配置package.json的脚本命令
   打开你的package.json，在scripts字段里添加打包和开发服务的命令：

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack-dev-server --mode development"
}

2. 选择对应的运行方式

• 开发阶段：运行npm run dev启动Webpack Dev Server，之后在浏览器访问localhost:4000。这时候Dev Server会帮你实时编译代码，并且处理模块依赖，不会再出现require未定义的错误。
• 生产打包：运行npm run build，Webpack会把你的所有依赖代码打包到dist/build.js里。之后在你的HTML文件里，一定要引入这个打包后的文件，而不是直接引入src/js/app.js，比如：

<script src="../dist/build.js"></script>

思路2：改用ES原生模块语法（无需Webpack） #

如果你暂时不想用Webpack，也可以直接用浏览器支持的ES模块语法：

1. 修改模块文件的导出方式
   把Desktop.js改成ES导出：

export default function Desktop() {
  this.height = 3
}

2. 修改app.js的导入方式
   把require换成ES的import：

console.log('hello')
import Desktop from './Desktop.js'
let newVar = new Desktop()
console.log(newVar.height)

3. 在HTML里添加模块声明
   引入app.js的时候，要加上type="module"属性：

<script type="module" src="js/app.js"></script>

这种方式需要注意浏览器兼容性（现代浏览器基本都支持），而且文件路径要确保正确，比如导入时要加上.js后缀。

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