2017-11-25 222 views
2

我們試圖使我們的React + GraphQL項目獨立於生態系統中的任何其他層,以改善開發人員的體驗。與此相對應,我們編寫了一個簡潔的HOC,它包裝了Apollo自己的graphql HOC,並使用內部環境變量在網絡抓取和模擬數據之間切換。在生產版本中,所有模擬數據顯然不被使用,即使它是import ed。如何避免在Webpack構建上捆綁模擬模塊?

有什麼辦法來避免包括的WebPack的生產,你知道你的模塊不會需要,同時保持一切相同的/沒有違反程序?

喜歡的東西dynamic import()可以做的伎倆,但最終分塊你的構建,而不是忽略了什麼,你並不需要/想。

UPDATE:應用程序使用create-react-app1.0.17創建和後噴射。

+1

是否有可能將模擬數據模塊解析爲生產中的空模塊? https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js – HMR

+0

模擬apollo客戶端返回您想要模擬的數據,本地解決當NODE_ENV ==='production'不爲apollo提供模擬時,使用NODE_ENV env var在你的webpack.conf文件中將apollo添加到你的模擬模塊中,讓它遵循它的過程。這應該工作 –

+0

@HMR我相信這將是一個直截了當的解決方案。任何想法如何處理? –

回答

3

我正在使用以下目錄結構。

api 
    index.js 
    apimock.js 
    apirest.js 

在index.js您根據NODE_ENV切換實現:

if (process.env.NODE_ENV === 'production') { 
    module.exports = require('./apirest'); 
} else { 
    module.exports = require('./apimock'); 
} 

您將需要使用的WebPack DefinePlugin設置NODE_ENV:

new webpack.DefinePlugin({ 
    'process.env': { 
    NODE_ENV: `"${process.env.NODE_ENV || 'development'}"`, 
    ENABLE_DEVTOOLS: JSON.stringify(!!process.env.ENABLE_DEVTOOLS) 
    } 
}) 

生成命令(NPM腳本):

NODE_ENV=production webpack --config webpack.config.js 

或模擬實現:

NODE_ENV=development webpack --config webpack.config.js 

的WebPack只能捆綁取決於NODE_ENV單一的實現。

在您的組件(傳奇......),你只需導入API:

import * as api from 'api'; 
+0

這會工作。但不幸的是,在我們的場景中並不那麼簡單,因爲數據層是通過Apollo的'graphql' HOC訪問的。不過,你給了我一些想法。 –

0

在你webpack.config.dev.js

resolve: { 
    alias:{ 
    "react-apollo":"./mock.js" 
    } 
} 

現在所有模塊請求作出反應,阿波羅編譯時會得到模擬爲dev。

我沒有阿波羅的客戶端,但這裏是嘲諷的jQuery的例子:

您的代碼:

import $ from 'jquery'; 
console.log($().message) 

webpack.dev.config.js:

alias:{ 
    "jquery":"./mock.js" 
} 

嘲笑。js:

​​