Question

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

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

$.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缺乏对环境文件夹的干扰。

Answer 1

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

将配置文件生成为 config.js 。

module.exports = <%= url %>

下面是我的任务，设置Dev＆prod的网址。

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',
    ...
});

希望这会有所帮助：）

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

1 个答案: