0

我在通用 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));

我尝试用正常替换自定义 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 至少会有所作为？

4

1 回答 1

0

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

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

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

于 2019-04-10T08:54:37.607 回答