グローバル変数はwebpackからのtypescriptで定義されていません

Question

typescript 2.4.0DefinePluginを使用してグローバル変数/環境変数を作成しようとしています。webpackを使用しています。だからここに私が取るしようとしているアプローチです：

webpack.jsはコンソールで、一部

new webpack.DefinePlugin({ 
    environment: JSON.stringify('DEVELOPMENT'), 
}), 

globals.ts

declare const environment: String; 
console.log(environment); 
export { environment }; 
console.log(environment); 

environmentService.ts

import { IEnvironment } from 'environment'; 
import { environment } from '../globals'; 
console.log(environment); 

export default class EnvironmentService implements IEnvironment { 
    environmentName: String = environment; 

    get isDevelopment(): boolean { 
    return this.environmentName === 'DEVELOPMENT'; 
    } 

    get isProduction(): boolean { 
    return this.environmentName === 'PRODUCTION'; 
    } 
} 

を定義しますログ取得：

DEVELOPMENT 
DEVELOPMENT 
undefined 

だからenvironmentService.tsがundefinedになると私はと私には分かりません。

exports変数だけで値は表示されません。

誰かが私が間違ってやっていることを説明することができ、なぜそれが得られるのかundefined私はそれを感謝します。

編集1

私はDefinePluginが何をしているか見ると思います。 environmentをDEVELOPMENTに設定せず、代わりにconsole.log(environment);をconsole.log('DEVELOPMENT');に置き換え、exportsenvironmentを未定義に設定します。

Answer 1

DefinePluginはコード部分をインライン化するため、JSON.stringify('DEVELOPMENT')だけでなく、すべて'DEVELOPMENT'を必要としています。それは与えられたコード部分をそのまま知っているグローバル識別子を置き換えます。あなたはenvironment: '"PROD" + "DUCTION"'

を定義する場合は、

if(environment === 'PRODUCTION') { 

} 

は

if("PROD" + "DUCTION" === 'PRODUCTION') { 

} 

になり、このような何かはTS2

に

const env: String = environment; 
export { env as environment };