如何使用 / gulp 管理 ReactJS 应用程序中的应用程序变量？

Question

我有一些 application/configurations 变量，例如 MY_ENDPOINT，它应该指向开发的 http://dev.myendpoint/ 和生产的 http://myendpoint/。我应该将此信息存储在使用 gulpjs（和 flux）的 ReactJS 应用程序中的什么位置？

Answer 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"}');

如何使用 / gulp 管理 ReactJS 应用程序中的应用程序变量？

How to manage application variables in a ReactJS app w/ gulp?

gulp

reactjs