JSグローバルが評価でクラッシュする

Question

Webpacked ReactJSアプリケーションが動作する現在の環境（開発、生産、テスト、またはデプロイメント）を定義するグローバル環境変数を設定します。しかし、環境変数__ENV__にアクセスしようとすると、この非常に奇妙なエラーが発生します。

次のような類似のコードはすべて、同じエラー（Uncaught ReferenceError: deployment is not defined）で失敗します。展開は__ENV__で、ref名ではありません。私がそれを与える価値に関係なく同じことが起こります。ここでは三つのサンプルです：

console.log(process.env.NODE_ENV); 
global.__ENV__ = process.env.NODE_ENV || 'development'; 
console.log(__ENV__); // crashes here otherwise crashes at next line 
global.__PROD__ = __ENV__ == 'production'; 
global.__DEPLOY__ = __ENV__ == 'deployment'; 
global.__DEV__ = __ENV__ == 'development'; 
global.__TEST__ = __ENV__ == 'test'; 

console.log(process.env.NODE_ENV); 
window.__ENV__ = process.env.NODE_ENV || 'development'; 
console.log(__ENV__); // crashes here otherwise crashes at next line 
window.__PROD__ = __ENV__ == 'production'; 
window.__DEPLOY__ = __ENV__ == 'deployment'; 
window.__DEV__ = __ENV__ == 'development'; 
window.__TEST__ = __ENV__ == 'test'; 

console.log(process.env.NODE_ENV); 
window.__ENV__ = process.env.NODE_ENV || 'development'; 
console.log(`${__ENV__}`); // crashes here otherwise crashes at next line 
window.__PROD__ = `${__ENV__}` == 'production'; 
window.__DEPLOY__ = `${__ENV__}` == 'deployment'; 
window.__DEV__ = `${__ENV__}` == 'development'; 
window.__TEST__ = `${__ENV__}` == 'test'; 

がさえ奇妙は、このアプローチが代わりに動作します：

const __ENV__ = process.env.NODE_ENV || 'development'; 
console.log(__ENV__); 
global.__PROD__ = __ENV__ === 'production'; 
global.__DEPLOY__ = __ENV__ === 'deployment'; 
global.__DEV__ = __ENV__ === 'development'; 
global.__TEST__ = __ENV__ === 'test'; 

マイWebPACKの構成は次のものが含まれます。

config.globals = { 
    'process.env': { 
    'NODE_ENV': JSON.stringify(config.env) 
    }, 
    '__ENV__': config.env, 
    '__DEPLOY__': config.env === '"deployment"', 
    '__DEV__': config.env === '"development"', 
    '__PROD__': config.env === '"production"', 
    '__TEST__': config.env === '"test"' 
}; 

webpack_config.plugins.push(
    new webpack.DefinePlugin(config.globals) 
); 

これが事である理由を任意のアイデア？

これが助けになる可能性がある場合、私のコードベースはstage-0の提案が有効になっているES2015から切り離され、Webpackを使用して単一のバンドルとして出荷されます。

Answer 1

これが起こる唯一の理由は、ビルドツールをコンフィグレーションして、グローバル参照を__ENV__に置き換えた場合です。

ので、ビルドツールは

console.log(development); 

変数developmentが定義されていないので、これはstrictモードで失敗したと

console.log(__ENV__); 

に置き換えられます。

あなたはビルドツールがにリテラル文字列を挿入するように、それは

replace('__ENV__' , '"development"') 

である必要があり、あなたのビルドツールの構成方法を示すが、代わりの

replace('__ENV__', 'development') 

のようなものをやっていませんコード（変数名の代わりに）。コードの

（値が変数から来ている場合は、引用符を追加すること、最初JSON.stringifyを通してそれを渡す）