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