Question

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

import fetch from 'node-fetch';

在客户端，我不必导入任何内容，应使用window.fetch对象。

是否有办法有条件地导入获取对象，因此它使用服务器端node-fetch，并将客户端用于window.fetch？

我试过这个：

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

但进口必须是顶级＆＃39;

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

import fetch from 'node-fetch';

if(window) fetch = window.fetch;

但是fetch变为只读。

有解决方法吗？目前我有2个文件，一个带导入，一个没有（分别用于服务器/客户端），但我想避免重复代码。

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

您可以创建一个有条件地返回正确提取的模块，而不是直接导入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获取对象

2 个答案: