重用 ES6 获取对象

Question

我正在使用 webpack 来捆绑我的 JS，这样我就可以在服务器和客户端上使用它。我发现困难的一件事是在两个地方都使用 fetch 对象。在服务器端，有节点获取

import fetch from 'node-fetch';

在客户端，我不需要导入任何东西，应该使用 window.fetch 对象。

有没有办法有条件地导入获取对象，以便它在服务器端与 node-fetch 一起使用，并在客户端与 window.fetch 一起使用？

我试过这个：

if(window == null) {
  import fetch from 'node-fetch';
}

但导入必须 'top level'

如果 window 存在，我也尝试改变获取对象：

import fetch from 'node-fetch';

if(window) fetch = window.fetch;

但 fetch 变为只读。

有解决办法吗？目前我有 2 个文件，一个有导入，一个没有（分别用于 server/client），但我想避免重复代码。

Answer 1

这应该有效：

var fetch = window?window.fetch:require('node-fetch').fetch;

已编辑

如果你在严格模式下，就像下面评论的Mike：

var fetch = typeof window === 'object' && 
    window?window.fetch:require('node-fetch').fetch;

Answer 2

您可以创建一个有条件地 returns 正确提取的模块，而不是直接导入 node-fetch：

/* fetch.js */
// default to native fetch, if available
let activeFetch = fetch;

if (!activeFetch) {
    activeFetch = require('node-fetch');
}

export default activeFetch;

然后你可以导入你的包装器，它应该包含每个环境的正确版本：

import fetch from './fetch';
// should be node-fetch for server, window.fetch for client-side

重用 ES6 获取对象

Reuse ES6 fetch object

javascript

fetch

ecmascript-6