Question

我无法使用通用React应用中的Browserify Envify模块。

我有以下功能切换文件：

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));

我尝试用普通的（例如自述文件中缺少示例）替换自定义环境：

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));

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

根据我对enven的了解，我期望得到以下输出：

"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

细节决定成败。正如我在问题中所说的那样，问题仅发生在我的登台（可能是生产）服务器上。所以过了一会儿，我遇到了app.json，这是一个Heroku设置文件，部分负责发送应该设置哪些环境变量的设置。

因此，在我的"FEATURE_EXAMPLE": { "required": false}的{{1}}中添加"env": {}可以解决此问题。

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

确保不替换我的环境变量

1 个答案: