时间戳

首页 > 解决方案 > 如何使用 gulp 在 js 文件中使用环境变量

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

问题描述

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

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

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

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

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

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

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

标签： javascriptjquerygulpenvironment-variables

解决方案

以下是解决方案之一。您可以使用模板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';
});

生成配置文件的任务。

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

以下是为 dev 和 prod 构建的任务

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

希望这可以帮助 ：）

推荐阅读