使用Browserify打包遇ParseError，Node.js构建Web应用报错求助

我正在用Node.js构建Web应用，相关代码如下：

HTML文件 #

<!DOCTYPE html>
<html lang="en"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>My Class</title>
</head>
<body>
     <p class="myClass" id="myID">Click Here</p>

<script src="index.js"></script>
</body>
</html>

JS文件（index.js） #

require("dotenv").config();
const axios = require("axios");

const { myVar } = require("./ither.js");

document.addEventListener("click", function () {
  // DO SOMETHING
});

package.json依赖 #

"dependencies": {
    "axios": "^1.4.0",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "require": "^2.4.20",
  },
"devDependencies": {
   "@types/express": "^4.17.17"
}

遇到的问题 #

• 运行node index.js时，终端报错：ReferenceError: document is not defined
• 直接在浏览器打开页面时，报错：Uncaught ReferenceError: require is not defined
• 尝试用browserify解决，执行npm install -g browserify和src/index.js > src/bundle.js，又报错：

/node_modules/axios/index.js:1
import axios from './lib/axios.js';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

问题根源与解决步骤 #

1. 核心错误原因 #

• document is not defined：Node.js环境没有浏览器的DOM API，直接在Node里运行前端代码必然找不到document。
• require is not defined：浏览器原生不支持Node.js的CommonJS模块语法（require），直接引入Node风格的JS文件会报错。

2. Browserify报错原因 #

你用的Browserify默认仅支持CommonJS模块，但axios v1.x起默认使用ES模块（import/export），老版本Browserify无法直接解析。另外你执行的打包命令有误，正确命令不是src/index.js > src/bundle.js，而是browserify src/index.js -o src/bundle.js。

3. 完整解决方式 #

方案一：调整Browserify配置兼容ES模块

• 安装转译工具：

  npm install --save-dev babelify @babel/core @babel/preset-env
  

• 执行带转译的打包命令：

  browserify src/index.js -t [babelify --presets @babel/preset-env] -o src/bundle.js
  

• 修改HTML中的脚本引用：将<script src="index.js"></script>改为<script src="bundle.js"></script>，再在浏览器中打开页面即可。

方案二：拆分前后端代码（更合理的架构）

既然使用了Express，建议将前端代码与后端服务完全分离：

• 后端服务代码（server.js）：负责处理环境变量、API请求，不涉及DOM操作

  require("dotenv").config();
  const express = require("express");
  const axios = require("axios");
  const app = express();
  
  // 后端API接口示例
  app.get("/api/data", async (req, res) => {
    try {
      const response = await axios.get("目标API地址");
      res.send(response.data);
    } catch (err) {
      res.status(500).send(err.message);
    }
  });
  
  // 托管前端静态文件
  app.use(express.static("public"));
  
  app.listen(process.env.PORT || 3000, () => {
    console.log("服务运行在3000端口");
  });
  

• 前端代码（public/index.js）：纯浏览器环境代码，通过后端API获取数据

  document.addEventListener("click", async function () {
    // 调用后端API
    const response = await fetch("/api/data");
    const data = await response.json();
    // 处理数据逻辑
  });
  

• 将HTML、前端JS、CSS放入public文件夹，运行node server.js，访问http://localhost:3000即可正常使用。

额外注意事项 #

• package.json中的require包完全多余，Node.js原生支持require，直接删除该依赖。
• 如果想统一使用ES模块语法，可在package.json中添加"type": "module"，注意不要混用CommonJS与ES模块语法。

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