コンパイル時の条件をbabel/webpackで評価する

Question

私は、prodまたはdevの値に応じて値XまたはYを持つことができる変数を持つ設定ファイルを持っています。

私はコンパイル時に評価したいと思います。

babel-plugin-transform-node-env-inlineからNODE_ENV値を取得できましたが、式の評価方法がわかりません。私はbabel-plugin-transform-conditionalsを試しましたが、奇妙なコードエラーが発生します。存在しないエラー。

私は実行時に評価することができます。その場合、prodとdevの両方の値がapp.jsで使用できるようになります。

ここからどこに行くのか分からない!!

どのような解決策も（別のファイルをどうにかしてコンパイルするように）うまくいくかもしれませんが、どうすればいいのかわかりません。あなたの質問について

Answer 1

わからない、あなたはちょうどそれがfalseであればそれは

// or true 
if (false) { 
    // ... 
} 

に変換されます。この

if (process.env.NODE_ENV === 'development') { 
    // ... 
} 

ようif文を書くことができ、それが到達不能コードのようなものです、それはUglifyJsプラグインによって自動的に取り除かれます（あなたのwebpack設定でnew webpack.optimize.UglifyJsPlugin()を使用してください）

あなたがとにかく必要とされ、開発のための1つのWebPACKの設定を行い、生産のための1つの設定（Windowsを使用している場合とcross-env）process.env.NODE_ENV変数を宣言するか、それが

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
}) 

Answer 2

を動作しない場合がありDefinePluginを使用することを忘れないでください。 DefinePluginを使用して各設定で変数を指定すると、バンドル内のどこにでもそのグローバル変数を参照できます。

Answer 3

あなたが言及したプラグインを使用したことはありません。あなたはWebPACKのを実行したときにそうNODE_ENVは、ご使用の環境から来ている

webpack.config.js

var config = { 
    entry: { 
    ... 
    }, 
    output: { 
    ... 
    }, 
    module: { 
    ... 
    }, 
    plugins: [ 
    new webpack.DefinePlugin({ 
     "process.env": { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV), 
     } 
    }), 
    // some other plugins 
    ] 
}; 

を：しかし、デフォルトのWebPACKのセットアップは、私は次のようにやっていることのように動作するはずです。

package.json

{ 
    "scripts": { 
    "start": "NODE_ENV=development webpack-dev-server --progress --hot --inline --colors --host 0.0.0.0 --port 9999", 
    "production": "NODE_ENV=production webpack", 
    } 
} 

ごpackage.jsonで指定した環境でのWebPACKを実行します。

あなたのconfig.jsの

export default { 
    isDebug: process.env.NODE_ENV === "development", 
    logLevel: process.env.NODE_ENV === "development" ? "error" : "info" 
}; 

私はReduxのための私のアプリケーションで使用する別の例。私は開発中にredux-loggerを持っていただけでした。

import { createStore, applyMiddleware } from "redux"; 
import thunk from "redux-thunk"; 
import logger from "redux-logger"; 
import promise from "redux-promise-middleware"; 
import reducer from "./reducers"; 

const middleware = process.env.NODE_ENV === "production" ? [promise(), thunk] : [promise(), thunk, logger()]; 

export default createStore(
    reducer, 
    applyMiddleware(...middleware) 
); 

上記のreduxの例から生成されたコードを見れば、コンパイルした後でコンパイルしてください。

var middleware = true ? [(0, _reduxPromiseMiddleware2.default)(), _reduxThunk2.default] : [(0, _reduxPromiseMiddleware2.default)(), _reduxThunk2.default, (0, _reduxLogger2.default)()]; 

process.env.NODE_ENV === "production"trueに評価されています。