如何用Browserify将Node.js代码转为浏览器可用？现有方案失效求助

原始Node.js代码 #

import request from 'request';
import fs from 'fs'

const url = 'https://transfermarkt-api.vercel.app/players/28003/profile';
const headers = {
 'accept': 'application/json'
};

var myBody={}
request({
    url,
    headers
},
  (err, response, body) => {
   if (err) {
    console.error(err);
   } else {
    myBody = JSON.parse(body)
    console.log(myBody.name);
   }
   fs.writeFileSync('data.json', JSON.stringify(myBody));
});

终端运行结果 #

PS C:\Users\Gili\Downloads\transfermarktProject> node app.js
Messi

浏览器端错误信息 #

Access to fetch at 'https://transfermarkt-api.vercel.app/players/28003/profile' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
bundle.js:38215     GET https://transfermarkt-api.vercel.app/players/28003/profile net::ERR_FAILED 200
...（省略后续错误栈）
bundle.js:41095 Uncaught (in promise) TypeError: _fs.default.writeFileSync is not a function
    at Request._callback (bundle.js:41095:18)
    ...（省略后续错误栈）

错误原因分析 #

• CORS跨域限制：浏览器同源策略禁止本地文件（origin: null）向未配置跨域许可的第三方API发起请求，目标API缺少Access-Control-Allow-Origin响应头，导致请求被拦截。
• fs模块不兼容浏览器：fs是Node.js专属的文件系统模块，浏览器环境没有这个API，调用fs.writeFileSync必然报错。
• request模块适配问题：request模块为Node.js设计，即使通过Browserify打包到浏览器，底层实现仍会触发浏览器的跨域规则，不如原生fetch或axios适配性好。

解决方案 #

1. Browserify是否适合？ #

如果只是这个简单需求，没必要用Browserify，直接写原生浏览器代码更高效。如果你的项目依赖大量Node.js专属模块，Browserify是合适的打包工具，但需要处理模块的浏览器兼容性。

2. 方案一：直接编写浏览器原生代码（无需Browserify） #

去掉Node.js专属模块，用原生fetch发起请求，将数据展示在页面上：

<!DOCTYPE html>
<html>
<body>
  <div id="playerName"></div>
  <script>
    const url = 'https://transfermarkt-api.vercel.app/players/28003/profile';
    const headers = { 'accept': 'application/json' };

    fetch(url, { headers })
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(data => {
        console.log(data.name);
        // 将数据渲染到页面
        document.getElementById('playerName').textContent = `球员名称：${data.name}`;
      })
      .catch(err => console.error(err));
  </script>
</body>
</html>

跨域问题补充解决：

如果仍遇CORS错误，搭建简单Node.js代理服务器中转请求：

• 新建proxy.js：

const express = require('express');
const request = require('request');
const app = express();

app.get('/api/player', (req, res) => {
  const targetUrl = 'https://transfermarkt-api.vercel.app/players/28003/profile';
  req.pipe(request(targetUrl)).pipe(res);
});

app.listen(3000, () => console.log('代理服务器运行在 http://localhost:3000'));

• 安装依赖：npm install express request
• 启动代理：node proxy.js
• 修改浏览器代码请求地址为http://localhost:3000/api/player

3. 方案二：用Browserify打包适配后的代码 #

若坚持使用Browserify，先修改代码适配浏览器环境：

步骤1：修改app.js代码

const fetch = require('node-fetch');

const url = 'https://transfermarkt-api.vercel.app/players/28003/profile';
const headers = { 'accept': 'application/json' };

fetch(url, { headers })
  .then(response => response.json())
  .then(data => {
    console.log(data.name);
    // 将数据挂载到window，方便页面调用
    window.playerData = data;
  })
  .catch(err => console.error(err));

步骤2：安装依赖与Browserify

npm install node-fetch
npm install -g browserify

步骤3：打包代码

browserify app.js -o bundle.js

步骤4：创建HTML页面引入打包文件

<!DOCTYPE html>
<html>
<body>
  <div id="playerName"></div>
  <script src="bundle.js"></script>
  <script>
    // 等待数据加载完成后渲染
    setTimeout(() => {
      if (window.playerData) {
        document.getElementById('playerName').textContent = `球员名称：${window.playerData.name}`;
      }
    }, 1000);
  </script>
</body>
</html>

注意：

仍需通过代理服务器解决CORS问题，或确认目标API是否开放跨域许可。

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