使用 gulp 构建 prod 或 dev 代码时，读取环境变量，然后在客户端 JS 中替换它们

Question

所以可以说我在 js 中有一些代码

const myApiKey = 'id_0001'

但是我想将它与其他环境变量一起放在一些 bash 脚本中并从中读取，然后在 JS 中替换它，而不是对其进行编码

所以让我们说，对于 prod，我会从prod-env.sh或为 dev 读取它们dev-env.sh，然后 gulp 或其他一些工具会发挥魔力，并根据在prod-env.shor内部建立的任何内容替换 MY_API_KEY dev-env.sh。

const myApiKey = MY_API_KEY

更新：我想补充一点，我只关心 unix 操作系统，不关心 windows。在 golang 中有一种方法可以读取例如 envVars.get('MY_API_KEY')，我正在寻找类似的东西，但在客户端的 JS 中。

Answer 1

如果您使用的是 gulp，听起来您可以使用任何 gulp 字符串替换器，例如gulp-replace。

至于编写 gulp 任务。如果您愿意先将环境导入到您的 shell 中，那么在运行 node 之前，您可以通过以下方式访问环境process.env

gulp.task('build', function(){
  gulp.src(['example.js'])
    .pipe(replace('MY_API_KEY', process.env.MY_API_KEY))
    .pipe(gulp.dest('build/'));
});

如果不想在运行 node 之前导入环境文件，可以使用env2 之类的库来读取 shell 环境文件。

另一种选择是使用 js/json 来定义这些环境文件，并使用 require 加载它们。

prod-env.js

{
  "MY_API_KEY": "api_key"
}

gulpfile.js

{
  "MY_API_KEY": "api_key"
}

此外，对于更通用的、循环的替换版本，您可以执行以下操作：

const myEnv = require('./prod-env')

gulp.task('build', function(){
  gulp.src(['example.js'])
    .pipe(replace('MY_API_KEY', myEnv.MY_API_KEY))
    .pipe(gulp.dest('build/'));
});

在最后一个示例中，我${}在环境变量名称周围添加了名称以使其不易发生事故。所以源文件变成了：

gulp.task('build', function () {
  stream = gulp.src(['example.js']);

  for (const key in process.env) {
    stream.pipe('${' + key + '}', process.env[key]); 
  }

  stream.pipe(gulp.dest('build/'));
});