JavaScript Funktionen nach build verschwunden

[Shipyde]

Guten Abend,

ich habe das Problem, dass wenn ich gewisse Funktionen im Script nur durch Eingabe des Users aufrufen lasse, dass dann das Build Tool meine Funktionen in der ausgegebenen Datei "*.bundle.js" verschluckt bzw. sie für Ihn beim Build unsichtbar sind.
Gibt es da eine Möglichkeit dieses Problem zu beheben, wenn ja welche?

Dankeschön und einen schönen Abend,

-Shipy

[Johannes-Schiel]

Hmm ich kann dir noch nicht so richtig folgen. Deine Funktion taucht im Bundle nicht auf?

[Shipyde]

wenn ich zb.
function test(){ var x = 123; console.log(x); }
in der Main.js zustehen habe wird dieser nicht in die main.bundle.js übertragen da in dem Script selber die Funktion nicht aufgerufen wird.
Schreibe ich allerdings
test(); function test(){ var x = 123; console.log(x); }
wird der Funktionsinhalt in die main.bundle.js Datei geschrieben was dann so aussieht
console.log(123);
heißt ich habe am ende keine Funktion mehr die ich über meine HTML Datei aufrufen kann.

[Shipyde]

Ich habe nun eine Lösung für mich erst einmal gefunden.

Ich habe in der "gulpfile.js" Datei den Abschnitt
const script = () => { return browserify(${src}/js/main.js, { debug: true }) .transform('babelify', { presets: ['babel-preset-env'], plugins: ['babel-plugin-transform-runtime'] }).plugin('tinyify') .bundle() .pipe(source(main.bundle.js)) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(terser()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(${dest}/js)); };
aus kommentiert und dafür folgende Codezeilen hinzugefügt:

const script = () => { return gulp.src('${src}/js/*.js') .pipe(minify({ ext: { min: '.min.js' }, ignoreFiles: ['-min.js'] })) .pipe(gulp.dest('${dest}/js')) };

Somit Generiere ich auch eine Minifizierte JS Datei hab aber nicht die Probleme und es funktioniert alles, so wie es soll.
Aber vielleicht hast du ja noch eine bessere Lösung für mich um das Problem zu lösen.

LG

-Shipy

[kulle418]

Hi,
habe das selbe Problem nur hat der Lösungsansatz mit minify nicht funktioniert.
Im Anhang hab ich zwei Screenshots vom src/js/ und dist/js/.

Vielleicht hat ja jemand einen Workaround!?

[Shipyde]

gulpfile.zip

Da ist einmal meine gulpfile.js Datei.

• Geändert wurde hier, dass der ursprüngliche "Compile .js to minified.js" Abschnitt aus kommentiert wurde
• Neuer "Compile .js to minified.js" Abschnitt hinzugefügt. Siehe Datei.
• Im Abschnitt "Import important packages" noch darunter am ende const minify = require('gulp-minify'); hinzugefügt

Danach musste ich noch das minify Modul installieren mit npm install gulp-minify

und in der index.html muss natürlich noch im Script-Tag der Dateiname geändert werden, dieser müsste nun main.min.js lauten anstatt main.bundle.js

Außerdem besitzt meine Ordner Struktur im src Ordner noch ein assets Ordner in dem ich alle benötigten Bilder, CSS/JS Bibliotheken rein haue. Der assets Ordner wird automatisch in den dist Ordner übertragen.

Ich hoffe ich konnte weiterhelfen

[Shipyde]

@Johannes-Schiel @micschwarz

Vielleicht wäre es sogar möglich einen eigenen "?-Gulp-fragen" Discord Channel zu bekommen, um Beispielsweise solche Probleme besser auch mit der Community zu besprechen.

[micschwarz]

@Shipyde
Ich bin zwar nicht ganz sicher, aber ich vermute das Verhalten ist Absicht.
In der Regel sind Funktionen, die nicht aufgerufen werden, ziemlich nutzlos und nur Balast. Es gibt hier natürlich auch Ausnahmen. Deswegen ist die Frage ob man das wirklich "fixen" muss oder nicht, weils eben erwartetes Verhalten ist

[Shipyde]

@micschwarz
Ja ich weiß was du meinst, dass hatte ich auch im Hinterkopf, allerdings bringt mir das ja nichts wenn der Funktionsaufruf im HTML Code passiert und dann dadurch meine komplette Funktion weg ist nur, weil sie nicht in der JS Datei aufgerufen wird.
Klar könnte man versuchen den Teil, zb. bei einem Responsiv Menü mit CSS umsetzen dennoch ist es sichtlich verwirrend wenn dein Code deswegen dann nicht funktioniert und du dir so denkst mh... eigentlich habe ich doch alles richtig gemacht.

Gäbe es den eine Möglichkeit dem Script zu sagen er soll genau diese Funktion so lassen wie sie geschrieben ist?

[micschwarz]

Du kannst auch statt die Funktion ausm HTML aus aufzurufen, einfach den Listener im JS setzen.

document.getElementById("test").addEventListener('click', test)

Das wäre der vermutlich einfachste und auch sauberste "Workaround". Aber du hast recht, für den Fall sollte man überlegen, ob man das nicht anders machen kann

[Johannes-Schiel]

So hatte gestern Abend mal Zeit mir das anzusehen und das ist eig absicht, also das Funktionen die nichtgebraucht werden aus der .min entfernt werden sollte ja so sein. Würde das hier auch ungerne verändern :/ weil das eig "Best Practise" ist.

[Shipyde]

Du kannst auch statt die Funktion ausm HTML aus aufzurufen, einfach den Listener im JS setzen.

document.getElementById("test").addEventListener('click', test)

Das wäre der vermutlich einfachste und auch sauberste "Workaround". Aber du hast recht, für den Fall sollte man überlegen, ob man das nicht anders machen kann

Gut dann werde ich das mal so umsetzen :)
Vielen Dank nochmal für eure Zeit :)

#CLOSED