在没有 create-react-app 的情况下设置 ENV 变量答案

【问题标题】：Setting up ENV Variables Without create-react-app在没有 create-react-app 的情况下设置 ENV 变量
【发布时间】：2020-04-02 06:02:55
【问题描述】：

当您的 react 项目不是使用 create-react-app 构建并且没有后端时，设置 ENV 变量以在您的 react 项目中工作的过程是什么？

【问题讨论】：

标签： reactjs webpack environment-variables

【解决方案1】：

我想你可以在 linux 中的 .bashrc 文件中添加任何你想在程序中使用的环境变量。

Variable=<value>

您可以只添加变量和相应的值，然后使用 source abc.bashrc 保存和获取 bashrc 文件，然后这些变量将在当前终端的环境中可用。您可以在任何可以读取环境变量的编程语言中使用此文件。

【讨论】：

【解决方案2】：

找到了答案。引用自this post Aminu Kano。

Webpack 用户

如果你使用的是webpack，可以安装使用 dotenv-webpack 插件，请按照以下步骤操作：

安装包

yarn add dotenv-webpack OR npm i dotenv-webpack
// .env 
API_KEY='my secret api key' Add it to webpack.config.js file
// webpack.config.js const Dotenv = require('dotenv-webpack');
// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};
在你的代码中使用它
 process.env.API_KEY
更多信息和配置信息，请访问here

【讨论】：

要清楚，通过“设置环境变量”，您的意思是如何从项目中的文件加载它们？另请记住，create-react-app 仅在运行时使前缀环境变量 (REACT_APP_...) 可用。您可能不希望前端包中的每个变量。
是的，没错。这个应用程序仅适用于我的投资组合，我不打算连接后端，因此不必为了完全模糊数据而连接后端。与我上次使用 create-react-app 的项目（已经在幕后内置 dotenv）不同，我这次选择从头开始创建 webpack 配置。只是不知道如何设置它以获得与我习惯相同的功能，即从 env 文件加载 API 密钥。

【解决方案3】：

第一步：

yarn add dotenv-webpack

第 2 步：在 webpack.config.js 文件上：

const Dotenv = require('dotenv-webpack');

module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

最后一步：创建 .env 文件并将系统变量放入其中：

URL=something.com

【讨论】：