如何在带有 gulp 的 ReactJS 应用程序中管理应用程序变量？答案

【问题标题】：How to manage application variables in a ReactJS app w/ gulp?如何在带有 gulp 的 ReactJS 应用程序中管理应用程序变量？
【发布时间】：2015-01-09 00:52:53
【问题描述】：

我有一些应用程序/配置变量，例如 MY_ENDPOINT，应该指向 http://dev.myendpoint/ 用于开发，http://myendpoint/ 用于生产。我应该在使用 gulpjs（和通量）的 ReactJS 应用程序中将这些信息存储在哪里？

【问题讨论】：

标签： gulp reactjs

【解决方案1】：

如果您使用的是 browserify，则可以使用 envify 转换来提供编译时变量。

var envParams = {};

function bundle(){
  return gulp.src('src/app.js')
  .pipe(gulpBrowserify({
    transform: [
      'reactify',
      ['envify', envParams]
    ]
  }))
  .pipe(gulp.dest('dist'));
};

gulp.task('scripts-dev', function(){
  envParams = {MY_ENDPOINT: 'http://dev.myendpoint/'};
  return bundle();
});

gulp.task('scripts-prod', function(){
  envParams = {MY_ENDPOINT: 'http://myendpoint/'};
  return bundle();
});

在你的代码中：

fetch(process.env.MY_ENDPOINT + "api/foo')...

你也可以在命令行中提供环境变量，但是 gulp 文件会默认覆盖它们：

MY_ENDPOINT=something gulp scripts-dev

并允许命令行优先：

envParams = {MY_ENDPOINT: process.env.MY_ENDPOINT || 'http://myendpoint/'};

// or with es6 shim
envParams = Object.assign({MY_ENDPOINT: 'http://myendpoint/'}, process.env);

您也可以在其他需要静态字符串的转换之前使用 envify，例如 brfs：

var config = JSON.parse(fs.readFileSync(process.env.CONFIG_PATH));

将编译成：

var config = JSON.parse(fs.readFileSync('/home/.../dev-config.json'));

最后进入：

var config = JSON.parse('{"foo": "bar"}');

【讨论】：

谢谢。这导致我使用 DefinePlugin for webpack。
@Bradford 如果你在另一个答案中添加一个例子会很酷，我相信它会帮助到这里的 webpack 用户。