node.js - Webpack DefinePlugin 未将环境变量传递给 Node 服务器

Question

Webpack 的 DefinePlugin 没有通过环境变量。我正在使用 Webpack v2.2.1

我的 Webpack plugins block 如下:

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify("development"),
    'process.env.API_URL': JSON.stringify("test")
  }),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
 ]

server.js:

console.log('env', process.env.NODE_ENV) // undefined
console.log('url', process.env.API_URL); // undefined

.babelrc 配置:

{"presets": ["es2015", "stage-0", "react"]}

我已经切换了 babel 预设，将 Webpack 恢复到 2.0.0，但真的不知道是什么原因导致这些变量不能被复制。如果我需要提供任何其他信息或代码，请 lmk. :)

Answer 1

希望这仍然对那里的人有所帮助。

Webpack 生成静态捆绑文件，因此环境变量必须在 webpack 执行其操作时可用。

基于 .babelrc 文件，我可以看到它是一个与 webpack 捆绑的 React 应用程序。所以你想要做的是安装 dotenv 作为依赖 npm install --save dotenv

在您的 webpack.config.js 文件中，您需要执行以下操作:

    //require dotenv and optionally pass path/to/.env
    const DotEnv = require('dotenv').config({path: __dirname + '/.env'}),
          webpack = require('webpack'),

   //Then define a new webpack plugin which reads the .env variables at bundle time
          dotEnv = new webpack.DefinePlugin({
              "process.env": {
              'BASE_URL': JSON.stringify(process.env.BASE_URL),
              'PORT': JSON.stringify(process.env.PORT)
             }
        });

    // Then add the newly defined plugin into the plugin section of the exported
    //config object
    const config = {
        entry: `${SRC_DIR}/path/to/index.js`,
        output: {
            path: `${DIST_DIR}/app`,
            filename: 'bundle.js',
            publicPath: '/app/'
        },
        module: {
            loaders: [
                {
                    test: /\.js?$/,
                    include: SRC_DIR,
                    loader: "babel-loader",
                    exclude: /node_modules/,
                    query: {
                        presets: ["react", "es2015", "stage-3"]
                    }
                }
            ]
        },
        plugins: [
            dotEnv
        ]
    };
    module.exports = config;

所以在捆绑时发生的情况是，环境变量被全局存储到在新定义的 webpack 插件中创建的 process.env 对象中，这使得我们的变量可以通过 process.env.[VARIABLE_NAME]

在我们代码库中的任何位置访问

P.S:在 Heroku 等云服务器上，请确保在部署代码之前设置所有所需的环境变量。并且如果在代码部署后进行了更改，则需要重新部署以便 webpack 更新存储的变量。此方法适用于 react 和角度。我相信它应该适用于所有 webpack 构建。编辑:此外，我们必须对传递给 webpack 插件的环境变量执行 JSON.stringify()。