无法从 Webpack 配置向 Angular 2 提供环境变量

Posted 2023-03-13

【中文标题】无法从 Webpack 配置向 Angular 2 提供环境变量

【英文标题】：Can't provide environment variable from Webpack config to Angular 2

【发布时间】：2017-08-21 08:15:03

【问题描述】：

在我的 Webpack 配置中，我有以下内容。

var config = require("./webfig");
config.module = config.module || [];
config.plugins.push(new webpack.DefinePlugin( "Hazaa": "Shazoo" ));
module.exports = config;

但是，在 TS 文件中，当我尝试使用下面的行访问它时，编译器会抱怨这样的东西不可用。我不完全确定如何对其进行故障排除，并且 googlearching 对这个特定问题没有太大的价值（目前我已经正确识别了诊断）。

如何在我的 TypeScript 代码中访问 Hazaa？

编辑

基于 cmets，我引入了以下更改。

config.plugins.push(new webpack.DefinePlugin( "Hazaa": JSON.stringify("Shazoo") ));

一个名为 app.d.ts 的文件被创建在与预先存在的 index.d.ts 相同的目录中。它只包含declare var Hazaa: string;，我从 typings.json 中引用它，就像这样。

  "globalDependencies": 
    "core-js": "registry:dt/core-js#0.9.7+20161130133742",
    "app": "file:./typings/app.d.ts"
  

我还从 tsconfig.json 部分 files 中引用了它，如下所示。

  "compilerOptions": 
    "baseUrl": "./source/application",
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  ,
  "files": [
    "typings/index.d.ts",
    "typings/app.d.ts"
  ],
  "include": [ "source/**/*" ],
  "exclude": [ "node_modules" ]

没有任何帮助 - 当我在组件的构造函数中使用 console.log(Hazaa) 时，我收到编译时错误，提示找不到名称。

【问题讨论】：

除了Jaganathan Bantheswaran's answer，还需要使用JSON.stringify("Shazoo")或'"Shazoo"'

你真的是说我必须字符串化一个字符串吗？就像(bool)true...

假设你有console.log(Hazaa)。这将被console.log(Shazoo) 取代。了解为什么需要使用引号？

是的。如果我必须手动编辑我的 .d.ts 文件，仍然会感到困惑。这些将定期重新生成...

不太清楚你的意思。我所说的，你应该在你的 webpack 配置 DefinPlugin 中做。不确定这与定义文件有什么关系。

【参考方案1】：

由于 TypeScript 不知道在构建项目时注入到代码中的 webpack 全局变量（使用 DefinePlugin 定义的变量），因此会报错。你必须告诉 TypeScript Hazaa 是一个字符串类型的变量，它会在构建时被评估。

所以用你的 .d.ts 文件声明Hazaa。

declare var Hazaa: string;

【讨论】：

该声明的合适位置在哪里？我的意思是，如何声明它以便它自动进入我的 x.d.ts 文件？或者你是说我必须手动完成？我的 typings 时不时地被重建，所以那会很痛苦......

这个声明可以在你的app.d.ts。检查这个bennadel.com/blog/…。

还不完全在那里。我已阅读博客并进行了一些更改（请查看问题中的编辑）。