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);

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

所以console.log(environment);内environmentService.ts在我期待undefined并且我不确定为什么时会给我DEVELOPMENT？

它只显示exports变量而不是值？

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

修改1

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

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

Answer 2

您需要像这样为所有webpack DefinePlugin变量更新globals.ts：

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

More here。

Answer 3

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

declare const environment: String;

TypeScript在编译期间默认包括所有@types软件包：https://www.typescriptlang.org/tsconfig#types

来自webpack

3 个答案: