javascript - 来自 webpack 的 typescript 中未定义全局变量

Question

在 typescript 2.4.0我正在尝试使用 DefinePlugin 创建全局/环境变量使用 webpack .所以这是我试图采取的方法:

webpack.js 定义部分

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

全局变量.ts

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

环境服务.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

所以 console.log(environment);里面 environmentService.ts给我 undefined当我期待 DEVELOPMENT我不知道为什么？

看来只有 exports变量而不是值？

如果有人可以解释我做错了什么以及为什么会得到 undefined我会很感激。

编辑 1

我想我看到了什么 DefinePlugin是在做。它没有设置 environment至 DEVELOPMENT而是替换行 console.log(environment);与 console.log('DEVELOPMENT');当它 exports environment它未定义。

Answer 1

您可以创建 @types文件夹并放置一个声明文件global.d.ts在其中，仅以下内容。

declare const environment: string;

TypeScript 包含所有 @types编译时默认包: https://www.typescriptlang.org/tsconfig#types