React 中的 Webpack process.env 变量答案

【问题标题】：Webpack process.env vars in ReactReact 中的 Webpack process.env 变量
【发布时间】：2019-04-18 00:15:50
【问题描述】：

在 Browserify / Gulp 世界中，我曾经使用 envify 在 React 代码中“填充” process.env 变量。在 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'])
  ]

在我的 webpack 配置中。

process.env 变量仍未被“填充”

【问题讨论】：

标签： webpack

【解决方案1】：

尝试传递一个对象：

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

希望对你有帮助。

【讨论】：

您的示例中的值是硬编码的。试图从 .env 文件中获取它们。我正在关注 Webpack 示例，但并不意外 — Webpack 无法正常工作。
您在代码示例中使用了一个数组。您是否尝试将值作为对象传递？像 new webpack.EnvironmentPlugin( { .. } )

【解决方案2】：

如果您不介意安装 lib dotenv（只是为了构建您的项目）。它会加载您的.env 文件，然后，您可以生成一个包含所有数据的对象，并通过DefinePlugin 设置在“process.env”变量中。

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
    }),
  ],
}

【讨论】：