再利用ES6フェッチオブジェクト

Question

私はJSをバンドルするためにwebpackを使用しているので、サーバーとクライアントで使用できます。私が難しいと思っていることの1つは、両方の場所でフェッチオブジェクトを使用することです。サーバー側では、ノード

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; 

が、フェッチは読み取り専用になります。

回避策はありますか？現在、私は2つのファイルをインポートと1つ（それぞれのサーバー/クライアント用）持っているが、私は重複したコードを避けたい。これは動作するはず

Answer 1

：

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

編集

あなたがstrictモードにある場合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; 

は、次に、あなたのラッパーをインポートすることができ、それはそれぞれの環境のための正しいバージョンを含める必要があります。あなたが一緒にあなたのクライアントJS LIBSとサーバーJS LIBSをバンドルしたくない

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