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

Question

我有一些应用程序/配置变量，例如 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"}');