Webpack process.env в React

Question

В мире Browserify / Gulp я использовал envify для «заполнения» переменных process.env в коде React. Как достичь этого в мире Webpack?

Глядя на этот документ https://webpack.js.org/plugins/environment-plugin/#src/components/Sidebar/Sidebar.jsx

Я настраиваю ..

plugins: [
    new HtmlWebpackPlugin({
      template: 'views/index.handlebars',
      filename: 'views/index.handlebars'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: '[name].js.map',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.EnvironmentPlugin(['HEROKU', 'HEROKU_PREFIX', 'LANG', 'NODE_ENV'])
  ]

в моем конфиге веб-пакета.

Варианты process.env до сих пор не заполнены

Answer 1

Если вы не против установить lib dotenv (просто для сборки вашего проекта).Он загружает ваш .env файл и после этого вы можете сгенерировать объект со всеми данными и установить его в переменной 'process.env' с помощью DefinePlugin.

const dotenv = require('dotenv');

let env;
// load your .env file
const getEnv = () => {
  if (!env) {
    env = dotenv.config({ path: `${process.cwd()}/config/dev.env`}).parsed;
  }
  return env;
};
 
// generate an object with all env variables 
const envKeys = Object.keys(getEnv()).reduce((prev, next) => {
  prev[`${next}`] = JSON.stringify(getEnv()[next]);
  return prev;
}, {'NODE_ENV': JSON.stringify('development')});



//webpack conf

module.exports = {
  ...
  plugins: [
    // apply all your env var to process.env variable
    new webpack.DefinePlugin({
      'process.env': envKeys
    }),
  ],
}

Answer 2

Попробуйте вместо этого передать объект:

plugins: [
...
    new webpack.EnvironmentPlugin({
        'HEROKU': 'Heroku',
        'HEROKU_PREFIX': 'Prefix_', 
        'LANG': 'English', 
        'NODE_ENV': 'development'
    })
]

Надеюсь, это поможет.