如何在構建時更改客戶端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？

回答

相關問題