如何在构建时更改客户端 JS 中的 URL？答案

【问题标题】：How to change URLs inside a client-side JS at build?如何在构建时更改客户端 JS 中的 URL？
【发布时间】：2016-07-28 20:35:28
【问题描述】：

我有一个由 Node.Js 服务器提供给网络浏览器的 JS 文件。

在 Dev 中运行时，我希望客户端 JS 将数据发送到本地主机，以便我可以将有效负载记录到本地 node.js 服务器。

但是当我们部署到生产环境时，我当然希望客户端 JS 文件将数据从浏览器发送到我的生产 URL。

现在我一直在手动修改提供服务的 JS 文件中的 URL，在进行 Gulp 构建之前在 localhost 和公共 URL 之间切换，但我知道这不是正确的方法，并且容易出现“哎呀”我忘记了”的问题。

什么是正确的方法？还是最佳实践？我应该使用一些 gulp 包吗？

【问题讨论】：

在运行 gulp 之前你特别修改了什么？你在运行节点服务器吗？静态网站？
对不起 - 措辞不佳。我更新了问题。
我做了一些研究，似乎没有一个伟大而简单的解决方案。最后，我决定更改 URL 的位置。幸运的是，在我的例子中，这个 JS 是从标签中调用的。因此，我将 URL 设置为标签中全局变量的一部分，并让 JS 文件引用全局变量。现在设置了两个 URL 有效负载，由调用 HTML/JS 控制。
你的意思是你想得到base url ??
@al_kasih_empatix 否。在我提供的 JS 文件中。一些数据被生成并发送到服务器。我想设置那个保存那个 URL 的 Var，当在开发与生产中时，浏览器在其中发送数据两个不同的 URL。我不想在构建项目之前手动更改它。

标签： javascript node.js build gulp

【解决方案1】：

如果您现在还没有解决这个问题，您可以使用gulp-replace。例如，假设您有一个从/src 读取的构建任务，压缩您的JavaScript 并将其输出到/dist。您可以通过管道将您的 JavaScript 源发送到 replace()（第一个参数是开发 URL，第二个参数是您的生产 URL）：

var gulp = require('gulp');
var path = require('path');
var jsmin = require('gulp-jsmin');
var replace = require('gulp-replace');

var SOURCE = 'src';
var BUILD = 'dist';
var URL = 'http://www.whatever.com/api';

gulp.task('build', function () {
    return gulp.src(path.join(SOURCE, '**/*.js'))
        .pipe(jsmin())
        .pipe(replace('http://localhost:3000/api', URL))
        .pipe(gulp.dest(BUILD))
});

如果您有一个文件./src/script.js 执行简单的 jQuery AJAX 请求，请参阅下面的前后效果。

之前

$.get('http://localhost:3000/api', function (data) {
    console.log(data);
});

之后（忽略缩小）

$.get('http://www.whatever.com/api', function (data) {
    console.log(data);
});

【讨论】：

那么，如果我们有依赖于主机名、来源等的逻辑，请多次替换它？有没有更好的方法来做到这一点？