使用Browserify打包生成空文件，切换Esbuild遇Node依赖解析错误求助

一、Browserify生成空bundle.js的解决方法 #

空文件大概率是依赖未正确安装，或重定向输出掩盖了命令执行错误。按以下步骤排查：

1. 初始化项目并安装本地依赖
   确保在项目根目录操作，若没有package.json先执行：

   npm init -y
   

   必须本地安装request（全局模块无法被Browserify识别）：

   npm install request --save
   

2. 使用Browserify原生输出参数
   放弃>重定向，改用-o参数指定输出文件，终端会直接显示错误信息：

   browserify stocksite.js -o bundle.js
   

   如果终端提示找不到request，说明依赖安装路径错误，检查是否在项目根目录执行的npm install。

二、esbuild Node核心模块解析错误的解决方法 #

核心问题是request是Node.js专属模块，依赖http、https等浏览器不存在的核心API，直接打包必然报错，有两种解决方案：

方案1：替换为浏览器兼容的HTTP客户端（推荐） #

request已被废弃，推荐用浏览器原生fetch API，无需额外依赖。修改代码如下：

const url = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=IBM&apikey=3ZSN6PGMF9BH7XEX';

fetch(url, {
  headers: {'User-Agent': 'request'}
})
.then(res => {
  if (res.status !== 200) {
    throw new Error(`Status: ${res.status}`);
  }
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.log('Error:', err));

修改后直接执行原esbuild命令即可，无需额外配置。

方案2：配置esbuild兼容Node核心模块（仅作参考） #

若坚持使用request，需安装浏览器兼容的核心模块替代品：

1. 安装依赖：

   npm install http-browserify https-browserify stream-browserify path-browserify --save
   

2. 更新package.json的browser字段：

   "browser": {
     "http": "http-browserify",
     "https": "https-browserify",
     "stream": "stream-browserify",
     "path": "path-browserify"
   }
   

3. 执行原esbuild命令：

   ./node_modules/.bin/esbuild ./Desktop/stock-site-app/src/stocksite.js --bundle --outfile=Bundle.js
   

   注意：此方法会增加打包体积，且request已废弃，不建议新项目使用。

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