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

我有一个由Node.Js服务器提供给Web浏览器的JS文件。如何在构建时更改客户端JS中的URL？

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

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

现在我已经手动修改获取服务的JS文件中的URL，在执行我的Gulp构建之前在localhost和公用URL之间进行切换，但我知道这不是正确的方式，并且倾向于“哎呦我忘了“的问题。

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

来源

2016-07-28 Cyph

特别是在运行之前，一饮而尽你修改什么？你正在运行一个节点服务器？静态网站？ – Himmel

对不起 - 措辞不佳。我更新了这个问题。 – Cyph

我做了一些研究，似乎没有一个伟大的，简单的解决方案。最后，我决定改变网址的位置。幸运的是，在我的情况下，这个JS从标签中被调用。所以我将URL设置为标记中全局变量的一部分，并且让JS文件引用全局变量。现在URL负载被设置为两个由调用HTML/JS控制。 – Cyph

如果您尚未解决此问题，则可以使用gulp-replace。例如，假设您有一个从/src读取的构建任务，请将您的JavaScript缩小并将其输出到/dist。你可以管你的JavaScript源replace()（第一个参数是发展的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); 
});

来源

2016-08-04 18:41:58 MadScone

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

回答

相关问题