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

Question

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

webpack.js 定义部分

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

globals.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); 当我期待DEVELOPMENT时，内部environmentService.ts给了我undefined ，我不知道为什么？

它似乎只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 : @types

Answer 2

您需要像这样为任何 webpack DefinePlugin 变量更新您的 globals.ts：

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

更多在这里。

Answer 3

DefinePlugin 内联代码部分，这就是为什么你需要所有那些JSON.stringify('DEVELOPMENT')而不仅仅是'DEVELOPMENT' 。 它按原样用给定的代码部分替换它知道的全局标识符。 如果您定义environment: '"PROD" + "DUCTION"'

然后

if(environment === 'PRODUCTION') {

}

成为

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

}

这样的东西应该在 ts2 中工作

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