javascript - 如何为多个环境设置环境变量？

Question

我有一个 Next.js 应用程序，目前已经有了这个 next.config.js 设置，可以在本地工作时访问我的 .env 文件，效果很好:

// Initialize doteenv library
require("dotenv").config();

module.exports = {
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: "empty"
    };
    /**
     * Returns environment variables as an object
     */
    const env = Object.keys(process.env).reduce((acc, curr) => {
      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
      return acc;
    }, {});

    /** Allows you to create global constants which can be configured
     * at compile time, which in our case is our environment variables
     */
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  }
};

但是，当应用程序构建在实时(platform.sh)环境上时，我需要访问 platform.sh 变量而不是我的 .env 变量。 Platform.sh 提供此代码片段作为示例:

function read_base64_json(varName) {
  try {
    return JSON.parse(new Buffer(process.env[varName], 'base64').toString());
  } catch (err) {
    throw new Error(`no ${varName} environment variable`);
  }
};

// A simple variable.
let projectId = process.env.PLATFORM_PROJECT;

// A JSON-encoded value.
let variables = read_base64_json('PLATFORM_VARIABLES');

但是我不确定在哪里使用它以及它如何工作，以便它在本地使用我的 .env 文件并在实时环境中使用 platform.sh 变量。最好的方法是什么？

Answer 1

在你的 webpack.config 中，你可以像这样重新配置插件部分

plugins: [
    new webpack.DefinePlugin({
      VARIABLE_NAME:
        process.env.NODE_ENV === "production"
          ? VARIABLE_PRODUCTION_VALUE
          : VARIABLE_LOCAL_VALUE
    })
  ]

您可以在应用中的任何位置使用 VARIABLE_NAME，它会根据环境而变化。