不替换我的环境变量

Question

我在一个通用的React应用程序中遇到了Browserify 环境模块的问题。

我有以下功能切换文件：

export const featureToggles = {
  FEATURE_EXAMPLE: (process.env.FEATURE_EXAMPLE === 'true')
};

在我的Browserify输出中

"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.featureToggles = void 0;const featureToggles = {
  FEATURE_EXAMPLE: process.env.FEATURE_EXAMPLE === 'true' };exports.featureToggles = featureToggles;

当我在我的通用React应用程序中使用featureToggles时，我从服务器获得了正确的响应，但是客户端在水化时会覆盖。导致服务器的新功能被客户端水合中的旧功能所取代。

我的Browserify脚本如下所示(这个片段将在下面重复多次，根据我尝试的内容进行小的更改)：

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify(process.env))
    .bundle()
    .on('error', handleError)
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(globalSettings.production, stripDebug()))
    .pipe(gulpif(globalSettings.production, uglify()))
    .pipe(gulp.dest(taskSettings.scripts.dest));

我尝试过用normal (缺少自述文件中的示例)替换定制环境：

const envify = require('envify');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify)
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

我尝试过显式地设置变量：

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify({FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

我试过清洗：

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform(envify({_: 'purge', FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

我试过在全球范围内运行：

const envify = require('envify/custom');

// function declarations etc
  browserify()
    .transform(
      babelify.configure({
        ignore: [/(bower_components)|(node_modules)/]
      })
    )
    .transform({global: true}, envify({FEATURE_EXAMPLE: 'please, something'})
    .bundle()
    // same as before here
    .pipe(gulp.dest(taskSettings.scripts.dest));

我继承了密码，所以我基本上只是在黑暗中摸索。任何帮助都将不胜感激！

根据我对环境的理解，我期望得到以下输出：

"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.featureToggles = void 0;const featureToggles = {
  FEATURE_EXAMPLE: 'true' === 'true' };exports.featureToggles = featureToggles;

如果有任何帮助，我的功能切换在本地工作，而不是在我的准备环境。当我遍历我的特性并动态地读取process.env时，它也不起作用。这就意味着至少要做点什么？

Answer 1

魔鬼就在细节里。正如我在我的问题中所说的，这个问题只发生在我的分阶段服务器上(可能也是prod)。因此，过了一会儿，我发现了app.json，一个Heroku设置文件，部分负责发送设置应该设置哪些环境变量。

因此，在我的"env": {}中添加"env": {}解决了这个问题。

我仍然好奇为什么我仍然在我的dist文件夹中看到变量而不是被替换。