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个环境变量的前缀应为REACT_APP_：

注意：您必须创建以REACT_APP_开头的自定义环境变量。除NODE_ENV之外的任何其他变量都将被忽略，以避免在计算机上意外暴露可能具有相同名称的私钥。

来自“Adding Custom Environment Variables”文档。

您应该将这些环境变量添加到.env文件中，而不是将这些变量添加到.bash_profile文件中。将根据构建（即start或build）选择相应的文件，并且应用程序将更易于共享和部署。

Answer 2

我这样做的方法是在我的项目文件的根目录中有一个.env文件（将其添加到.gitignore）。

在该文件中，我定义了我的项目环境变量（可以通过将每个变量添加到它自己的行来分隔其他变量）：

NODE_ENV=development

然后使用dotenv npm模块，我可以访问任何webpack文件（或服务器端expressJS文件）中的值。

// in the command line
$ npm install --save dotenv

// at the top of the webpack config file
require('dotenv').config();

// in the plugins of the webpack config
plugins: [
    new webpack.DefinePlugin({
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
],

现在我可以在我的应用程序中通过webpack编译引用它：

console.log(NODE_ENV); // development

Answer 3

回答我自己的问题：我的项目是使用create-react-app生成的，根据其文档，环境变量以这种方式访问：

console.log(process.env.API_KEY_GOOGLE_MAPS)

webpack.DefinePlugin()不是必需的。

Answer 4

其他答案需要 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);

带有Webpack的Typescript中的环境变量

4 个答案: