Wie URLs in einem clientseitigen JS bei Build ändern?

Question

Ich habe eine JS-Datei, die von einem Node.Js-Server an einen Webbrowser geliefert wird.

Wenn ich in Dev läuft, möchte ich die clientseitige JS Daten an den localhost senden, also kann ich die Nutzlast auf meinem lokalen node.js Server protokollieren.

Aber wenn wir zur Produktion bereitstellen, möchte ich natürlich, dass die clientseitige JS-Datei Daten vom Browser an meine Produktions-URL sendet.

Im Moment habe ich die URL in der JS-Datei, die bedient wird, manuell geändert, indem ich zwischen localhost und der öffentlichen URL umschalte, bevor ich meine Gulp-Build mache, aber ich weiß, das ist nicht der richtige Weg und anfällig für die " Hoppla, ich vergaß "Problem.

Was ist der richtige Ansatz? Oder beste Praxis? Gibt es ein Schluck-Paket, das ich verwenden sollte?

Answer 1

Falls Sie dies noch nicht gelöst haben, können Sie gulp-replace verwenden. Angenommen, Sie haben eine Build-Aufgabe, die von /src liest, minimiert Ihr JavaScript und gibt es an /dist aus. Sie können über die Pipeline Ihrer JavaScript Quelle replace() (erstes Argument ist die Entwicklung URL, zweites Argument ist Ihre Produktion 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)) 
}); 

Wenn Sie eine Datei ./src/script.js haben, die einen einfachen jQuery AJAX-Request des Fall ist, sehen die vor und nach Effekt unten.

Vor

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

Nach (ohne Berücksichtigung minification)

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