使用Parcel V2.7.1构建时遇Uncaught ReferenceError: require未定义问题求助

可能的原因及修复步骤 #

• 规范入口文件的模块语法
  确保前端入口文件（如index.js）使用ES模块规范，引入axios时改用import而非CommonJS的require：

  import axios from 'axios';
  

• 明确指定Parcel构建目标为浏览器环境
  在项目根目录创建.parcelrc文件，强制Parcel输出浏览器兼容代码：

  {
    "extends": "@parcel/config-default",
    "targets": {
      "default": {
        "context": "browser"
      }
    }
  }
  

• 修正browserslist配置位置
  将browserslist配置放在package.json顶层，而非嵌套在engines中，正确格式如下：

  {
    "browserslist": ["> 0.25%", "not dead"]
  }
  

  可运行npx browserslist命令验证配置是否生效，查看输出的浏览器列表是否符合预期。

• 清理Parcel缓存后重新构建
  旧缓存可能导致异常代码残留，执行命令清理后重新构建：

  rm -rf .parcel-cache dist
  npx parcel build index.html # 替换为你的实际入口文件
  

• 重新安装axios确保版本兼容
  卸载并重新安装axios，确保使用适配浏览器环境的版本：

  npm uninstall axios
  npm install axios
  

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