Question

在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 var仍未“填充”

Answer 1

尝试传递对象：

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

希望对您有帮助。

Answer 2

如果您不介意安装lib De Morgan's laws（仅用于构建项目）。它会加载您的.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
    }),
  ],
}

Webpack process.env vars在React中

2 个答案: