如何使用 gulp 在 js 文件中使用环境变量答案

【问题标题】：How to use environment variable in js file with gulp如何使用 gulp 在 js 文件中使用环境变量
【发布时间】：2018-11-06 07:24:36
【问题描述】：

我正在帮助由 html、css 和 js 插件组成的项目，这些插件都是用 gulp 构建的。该项目是作为模板购买并由我们的营销团队定制的（是的......），我应该帮助编写脚本。

现在有一个插件可以通过$.ajax() 调用将表单数据发送到服务器。 Url 参数设置为常量，如下所示：

$.ajax({
  url: 'exact-api-url',
  type: 'POST'
  ...
});

如何用 env 变量替换它，我应该将它存储在哪里？ prod 和 dev 有不同的 URL。我希望它看起来像这样：

$.ajax({
  url: environment.API_URL,
  type: 'POST',
  ...
});

从解决方案中，我发现它们主要处理 gulpfile.js 本身中的 env 变量，而不是项目中的 js 代码.一种解决方法建议使用我不喜欢的全局 js 变量。正确的方法是什么？

我是一个 Angular/React 人，主要使用 webpack，我发现 gulp 缺少环境文件夹令人不安。

【问题讨论】：

标签： javascript jquery gulp environment-variables

【解决方案1】：

以下是解决方案之一。您可以使用模板 config.tmpl.js

生成配置文件为 config.js

module.exports = <%= url %>

以下是我为 Dev & prod 设置 url 的 gulp 任务。

gulp.task('set-dev-node-env', function() {
    return process.env.url = 'exact-dev-url';
});

gulp.task('set-prod-node-env', function() {
    return process.env.url = 'exact-prod-url';
});

生成config文件的任务。

var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');

gulp.task('config', function() {
    return gulp.src('path/to/config.tmpl.js')
      .pipe(template({url: `${process.env.url}`}))
      .pipe(rename('config.js'))
      .pipe(gulp.dest('path/to/config.js'));
});

以下是为开发和产品构建的任务

gulp.task('build_for_prod', ['set-prod-node-env','config'], function() {
    runSequence(
        '...buildSteps'
    );
});

gulp.task('build_for_dev', ['set-dev-node-env','config'], function() {
    runSequence(
        '...buildSteps'
    );
});

最后，在你的 JS 文件中

var config = require('path/to/config.js');

$.ajax({
    url: config.url,
    type: 'POST',
    ...
});

希望这会有所帮助:)

【讨论】：

谢谢，我试试