javascript - 带有 Webpack 的 Typescript 中的环境变量

Question

我无法使用 Webpack 的 DefinePlugin 在 Typescript 中声明全局变量。我希望就我做错了什么得到一些意见。

我在我的 .bash_profile 中创建了一个环境变量:

export API_KEY_GOOGLE_MAPS=xxxxxxxxxxxxxxxx

在我的 webpack.config.js 中，我有以下几行:

...
plugins: [
  new webpack.DefinePlugin({
    API_KEY_GOOGLE_MAPS: JSON.stringify(process.env.API_KEY_GOOGLE_MAPS),
  }),
],
...

在 index.tsx(我使用的是 React)中，我执行以下操作:

declare var API_KEY_GOOGLE_MAPS: string;

console.log(API_KEY_GOOGLE_MAPS)

这会在包含 console.log 的行中产生以下错误:

ReferenceError: API_KEY_GOOGLE_MAPS is not defined

有人有线索吗？

Answer 1

其他答案需要 create-react-app 所以我会提供我的答案。

首先，将插件添加到您的 Webpack 配置中:

const webpack = require("webpack");

module.exports = {
  // ... 
  plugins: [
    new webpack.DefinePlugin({
      MY_ENV_VAR: JSON.stringify(true),
    }),
  ],
};

接下来，在 TypeScript 中声明变量:

declare var MY_ENV_VAR : string | undefined;

最后，您可以在代码中访问变量:

console.log(MY_ENV_VAR);