Envify 不替换我的环境变量答案

【问题标题】：Envify not replacing my environment variablesEnvify 不替换我的环境变量
【发布时间】：2019-04-09 14:09:05
【问题描述】：

我在通用 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 脚本如下所示（这个 sn-p 将在下面重复多次，并根据我的尝试进行一些小的更改）：

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

我尝试将自定义 envify 替换为正常（自述文件中缺少示例）：

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

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

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

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

如果有任何帮助，我的功能切换可以在本地工作，但不能在我的暂存环境中工作。当我循环浏览我的功能并动态阅读process.env 时，它起初也不起作用。这意味着 envify 至少会有所作为？

【问题讨论】：

标签： javascript reactjs gulp browserify envify

【解决方案1】：

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

所以在我的app.json 中添加"FEATURE_EXAMPLE": { "required": false} 中的"env": {} 解决了这个问题。

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

【讨论】：