不使用create-react-app设置环境变量

Question

如果你的 React 项目不是使用 create-react-app 构建的，也没有后端，那么设置 ENV 变量的过程会是什么？

- Robert C

Answer 1

找到了答案。引用来自这篇文章，作者是Aminu Kano。

Webpack Users

If you are using webpack, you can install and use dotenv-webpack plugin, to do that follow steps below:

Install the package

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()
  ]
  ...
};

Use it in your code as

 process.env.API_KEY

For more information and configuration information, visit here

- Robert C

---

请明确一点，通过“设置环境变量”，你是指如何从项目文件中加载它们吗？同时要记住，create-react-app仅在运行时提供带前缀的环境变量（REACT_APP_...）。你可能不想在前端捆绑包中包含每个变量。 - timotgl

是的，没错。这个应用只是为了我的作品集，我不打算连接后端，所以连接后端来完全隐藏数据并不是必要的。与我的上一个项目不同，我使用了create-react-app（它在幕后已经内置了dotenv），这一次我选择从头开始创建webpack配置。只是不确定如何设置它以获得我习惯的相同功能，即从env文件加载API密钥。 - Robert C

Answer 2

步骤1：

yarn add dotenv-webpack

步骤2：在webpack.config.js文件中：

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

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

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

URL=something.com

- Mario Callejas

Answer 3

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

Variable=<value>

您可以添加变量和相应的值，然后保存并使用source abc.bashrc命令来源化bashrc文件，这样这些变量就会在当前终端的环境中可用。 您可以在任何可以读取环境变量的编程语言中使用此文件。

- Nilesh Jain