Question

目前，我正在本地计算机上构建一个REACT应用程序，并将其生产版本部署到Elastic Beanstalk。它是使用Webpack构建的。

在index.js（服务器端）我使用的env变量，如：process.env.PORT（在弹性豆茎定义），当建立的WebPack出来，这些置换为对象（{}）包含本地process.env 。

有没有办法阻止Webpack评估某些env变量？或者我错了，我是否需要首先在Elastic Beanstalk上构建生产包然后服务？

最糟糕的情况我可以简单地将所需的值添加到dotenv文件中并以此方式接近它。我希望能够使用Elastic Beanstalks Enviroment Variables。

提前致谢

更新 为了更好地解释下面，我试图在运行时在服务器端脚本中访问process.env变量。但是，在部署到AWS Elastic Beanstalk

之前，代码是在我的本地计算机上构建的

webpack.config.server

'use strict';

const util = require('util');
const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
// const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const paths = require('./paths');
const nodeExternals = require('webpack-node-externals');
const getClientEnvironment = require('./env');

const merge = require('webpack-merge');
const base = require('./webpack.config.base');

const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);


const config = {
    target: 'node',
    entry: paths.serverIndexJs,
    externals: [nodeExternals()], // / in order to ignore all modules in node_modules folder
    output: {
        path: paths.serverBuild,
        filename: 'bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            // "postcss" loader applies autoprefixer to our CSS.
            // "css" loader resolves paths in CSS and adds assets as dependencies.
            // "style" loader turns CSS into JS modules that inject <style> tags.
            // In production, we use a plugin to extract that CSS to a file, but
            // in development "style" loader enables hot editing of CSS.
            {
                test: /\.scss$/,
                include: [ path.resolve(paths.scss, 'vendor') ], // Global styles
                use: [
                    {
                        loader: "isomorphic-style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            importLoaders: 1,
                            sourceMap: true
                        }
                    }, {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "sass-loader", // compiles Sass to CSS
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                exclude: [ path.resolve(paths.scss, 'vendor'), path.resolve(__dirname, '../node_modules') ], // Module styles
                use: [
                    {
                        loader: "isomorphic-style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            importLoaders: 1,
                            sourceMap: true,
                            modules: true,
                            localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                        }
                    }, {
                        loader: "postcss-loader",
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "sass-loader", // compiles Sass to CSS
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: "sass-resources-loader",
                        options: {
                            resources: [
                                path.resolve(__dirname, '../node_modules/bootstrap/scss/_functions.scss'),
                                path.resolve(__dirname, '../src/scss/config/**/*.scss'),
                                path.resolve(__dirname, '../node_modules/bootstrap/scss/mixins/**/*.scss'),
                                path.resolve(__dirname, '../src/scss/helpers/**/*.scss'),
                            ]
                        }
                    }

                ]
            },
        ]
    },
    plugins: [
        // Makes some environment variables available to the JS code, for example:
        // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
        new webpack.DefinePlugin(env.stringified),
    ],
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false,
        setImmediate: false,
    }
};

module.exports = merge(base, config);

Answer 1

不是100％明确你正在尝试做什么，但听起来你只想将一些环境变量传递给DefinePlugin，而不是全部......？如果是这种情况，你可以写一点fn来过滤或列入env vars并将结果传递给DefinePlugin。如果您的DefinePlugin中未包含env var，则webpack在构建时将不会意识到它。

Answer 2

来自env.js的

getClientEnvironment返回了一个键值对象，然后传递给了DefinePlugin。

虽然没有将诸如process.env.PORT之类的环境变量传递给DefinePlugin，但它们被Webpack编译为未定义。

这是因为getClientEnviroment将环境变量作为process.env的对象返回

 { 'process.env': 
   { NODE_ENV: '"production"',
     PUBLIC_URL: '""',
     REACT_APP_HOST: '"localhost"',
     REACT_APP_PORT: '"8080"' 
    } 
  }

我没有意识到，在执行此操作时，DefinePlugin会覆盖所有process.env变量。

根据definePlugin的文档：

为流程首选'process.env.NODE_ENV'定义值时： JSON.stringify（'production'）over process：{env：{NODE_ENV： JSON.stringify（'production'）}}。使用后者将覆盖进程对象可能会破坏与某些模块的兼容性期望定义过程对象的其他值。

访问Elastic Beanstalk Node中定义的process.env.PORT，由Webpack构建的包

2 个答案: