Webpackビルドでモックモジュールをバンドルすることを避けるにはどうすればよいですか？

Question

私たちはReact + GraphQLプロジェクトをエコシステムの他のレイヤとは独立させ、開発者の経験を向上させようとしています。それに合わせて、Apollo自身のgraphql HOCをラップし、内部の環境変数を使用してネットワークのフェッチと模擬データを切り替える、細いHOCを作成しました。プロダクションビルドでは、がimportであっても、模擬データはすべて明らかに使用されません。

はあなたが/同じアプリを壊していない他のすべてを維持しながらを必要とするつもりはありません知っているのWebPACKの生産バンドルのモジュール含む回避するための方法はありますか？

何かのようなdynamic import()は、トリックを行いますが、あなたが必要でないものを省略するのではなく、あなたのビルドをチャンクアップします。

更新日：このアプリケーションはcreate-react-app1.0.17以降を使用して作成されました。

Answer 1

私は次のディレクトリ構造を使用しています。

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

あなたがNODE_ENV設定しWebPACKのDefinePluginを使用する必要があります：

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

ビルドコマンド（NPMスクリプト）を使用すると、NODE_ENVに応じた実装を切り替えるindex.jsで

api 
    index.js 
    apimock.js 
    apirest.js 

：

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

または擬似実装の場合：

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

Webpackは、NODE_ENVに応じて1つの実装のみをバンドルします。あなたのコンポーネントで

（サガ...）あなたは、単にインポートAPI：あなたの webpack.config.dev.jsで

import * as api from 'api'; 

Answer 2

：

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

今、すべてのモジュール、コンパイル時にモックを取得する反応-アポロを要求開発者のための。

私はアポロ・クライアントを持っていますが、ここではjQueryのモックの例ではありません。

あなたのコード：

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

webpack.dev.config.js：

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

モック。js：

​​