使用Dotenv和Webpack在React中使用env-vars

Question

我想訪問前端（反應）中定義的一些環境變量。

我有以下設置：

• React + NodeJS（我不使用create-react-app ）
• Webpack 4
• 多滕夫

我嘗試遵循https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5#0618，但是它不起作用，或者拋出任何錯誤。

webpack.config.js

const dotenv = require("dotenv");

module.exports = () => {
  // call dotenv and it will return an Object with a parsed key
  const env = dotenv.config().parsed;

  // reduce it to a nice object, the same as before
  const envKeys = Object.keys(env).reduce((prev, next) => {
    console.log(prev)
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

return { 
  ...,
  plugins: [
      new webpack.DefinePlugin(envKeys)
  ],
  ...
}

通過上面的WebPack的配置，我想我應該能夠做到<h4>My var: {process.env.REACT_APP_MY_VAR}</h4>在file.js ，當然我已經定義REACT_APP_MY_VAR我.env位於項目-file根。

通過上面我希望file.js呈現的價值REACT_APP_MY_VAR ，但我確實沒有渲染，無論是價值還是錯誤。

Answer 1

我建議您使用dotenv-webpack而不是dotenv軟件包，以方便配置。

4個簡單步驟：

1）使用安裝dotenv-wepack

npm install dotenv-webpack --save

2）在應用程序的根目錄下創建.env文件

API_URL=http://localhost:8000

3）將此添加到您的webpack配置文件。

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

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

4）在應用程序內的任何地方使用env變量。

import React from 'react';

    const App = () => {
        return (
            <h1>{process.env.API_URL}</h1>        
        );
    }
    export default App;

希望有幫助！！！