来自 webpack 的打字稿中未定义全局变量

Question

In typescript 2.4.0 I am trying to create global/environment variables using DefinePlugin using webpack . So here is the approach I am trying to take:

webpack.js Define part

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';
  }
}

In the console log I get:

DEVELOPMENT
DEVELOPMENT
undefined

So console.log(environment); inside environmentService.ts is giving me undefined when I am expecting DEVELOPMENT and I am not sure why?

It appears it only exports the variable and not the value?

If someone can explain what I am doing wrong and why its getting undefined i would appreciate it.

Edit 1

I think I see what DefinePlugin is doing. Its not setting environment to DEVELOPMENT but rather replacing lines console.log(environment); with console.log('DEVELOPMENT'); and when it exports environment its undefined.

Answer 1

You can create a @types folder and put a declaration file global.d.ts in it, with just below content.

declare const environment: String;

TypeScript includes all @types packages by default during compilation: https://www.typescriptlang.org/tsconfig#types

Answer 2

You need update your globals.ts like this for any webpack DefinePlugin variables:

declare const environment: string;
const _environment = environment
export { _environment as environment };

More here .

Answer 3

DefinePlugin inlines code parts, thats why you need all those JSON.stringify('DEVELOPMENT') not just 'DEVELOPMENT' . It replaces global identifiers it knows with the given code parts as is. If you define environment: '"PROD" + "DUCTION"'

Then

if(environment === 'PRODUCTION') {

}

Becomes

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

}

Something like this should work in ts2

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