如何在构建时更改客户端JS中的URL?
问题描述:
我有一个由Node.Js服务器提供给Web浏览器的JS文件。如何在构建时更改客户端JS中的URL?
在Dev中运行时,我希望客户端JS将数据发送到本地主机,因此可以将有效内容记录到本地node.js服务器。
但是,当我们部署到生产时,我当然希望客户端JS文件将数据从浏览器发送到我的生产URL。
现在我已经手动修改获取服务的JS文件中的URL,在执行我的Gulp构建之前在localhost和公用URL之间进行切换,但我知道这不是正确的方式,并且倾向于“哎呦我忘了“的问题。
什么是正确的方法?还是最佳做法?有一些我应该使用的gulp包吗?
答
如果您尚未解决此问题,则可以使用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);
});
特别是在运行之前,一饮而尽你修改什么?你正在运行一个节点服务器?静态网站? – Himmel
对不起 - 措辞不佳。我更新了这个问题。 – Cyph
我做了一些研究,似乎没有一个伟大的,简单的解决方案。最后,我决定改变网址的位置。幸运的是,在我的情况下,这个JS从标签中被调用。所以我将URL设置为标记中全局变量的一部分,并且让JS文件引用全局变量。现在URL负载被设置为两个由调用HTML/JS控制。 – Cyph