如何在浏览器与Node.js环境中共用基于fetch的API请求JS文件？

Absolutely, there are several reliable ways to make your API client work seamlessly in both environments without conflicting imports. Here are the most practical approaches:

1. Use a Cross-Environment Fetch Library (Easiest Solution) #

Libraries like cross-fetch are purpose-built to work in both browsers and Node.js. They automatically use the browser's native fetch when available, and fall back to a Node.js-compatible implementation (like node-fetch) in CLI environments.

Steps to implement: #

• Install the library via npm:

  npm install cross-fetch
  

• Import it in your API client file:

  import fetch from 'cross-fetch';
  

That’s it! This eliminates both the "fetch is not defined" error in Node.js and the module resolution issue in browsers, with zero extra boilerplate on your end.

2. Manual Environment Detection & Conditional Fetch Setup #

If you prefer avoiding external dependencies, you can manually detect the environment and set up fetch accordingly. This gives you full control but requires a bit more code.

Approach A: Async Conditional Import (for ES Modules) #

Static imports can’t be conditional, so use dynamic import() to load node-fetch only when running in Node.js:

let fetch;

// Check if we're in a Node.js environment
if (typeof process !== 'undefined' && process.versions?.node) {
  // Load node-fetch dynamically
  const nodeFetch = await import('node-fetch');
  fetch = nodeFetch.default;
} else {
  // Use the browser's native fetch
  fetch = window.fetch;
}

// Your API client class using the unified fetch
class APIClient {
  async fetchData(endpoint) {
    const response = await fetch(`https://api.example.com/${endpoint}`);
    return response.json();
  }
}

Note: If top-level await isn’t supported in your setup, wrap this code in an async initialization function and call it before instantiating your APIClient.

Approach B: Conditional Require (for CommonJS) #

If your code uses CommonJS syntax (Node.js default), you can use a conditional require:

let fetch;

if (typeof window === 'undefined') {
  // Node.js environment: load node-fetch
  fetch = require('node-fetch');
} else {
  // Browser environment: use native fetch
  fetch = window.fetch;
}

module.exports = class APIClient {
  // Your methods using fetch go here
};

3. Leverage Node.js Native Fetch (Node.js 18+) #

If you’re using Node.js 18 or newer, fetch is natively supported—no need for node-fetch at all. You can use fetch directly in your code, as both modern browsers and Node.js 18+ include it by default. This is the cleanest option if you don’t need to support older Node.js versions.

Key Notes: #

• For broad compatibility across all Node.js versions and browsers, cross-fetch is the most low-maintenance choice.
• If you go the manual route, test both environments thoroughly to avoid edge cases (like environments where neither window nor process is exposed, though those are rare for typical browser/CLI setups).

内容的提问来源于stack exchange，提问作者Avr.Nadav