重用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獲取對象

回答

相關問題