重用ES6获取对象

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

import fetch from 'node-fetch';

和客户端我没有导入任何东西，应使用window.fetch对象。

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

我已经试过这样：

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

但进口必须是 '顶级'

我也试过变异抓取对象，如果窗口存在：

import fetch from 'node-fetch'; 

if(window) fetch = window.fetch;

但获取变为只读。

是否有解决方法？目前我有两个文件一个导入和一个没有（分别为服务器/客户端），但我想避免重复的代码。

来源

2016-09-30 abdul ahmad

你不想捆绑客户端的js库和服务器的js库一起，因为客户端的js库对客户是可见的。 – lonelyloner

你可以使用'var fetch = window.fetch'这样的东西来替换'import'语句（https://www.npmjs.com/package/webpack-replace）。 –

这应该工作：

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

编辑

如果你是在严格模式，像Mike如下评论：

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

来源

2016-09-30 20:22:20 natanael

如果它们在严格模式下运行，则不适用。当试图访问'window'时会引发ReferenceError。 –

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

来源

2016-09-30 20:27:38

重用ES6获取对象

回答

相关问题