Schrittweise Refactoring von Javascript/Jquery-Datei in ES6-Module

Question

Ich Refactoring eine extrem große Javascript-Datei in mehrere Dateien mit es6 Module/Webpack. Zunächst verschiebe ich eine einzelne Funktion aus giantFile.js in singleFunction.js und importiere dann diese neue Funktionsdatei in index.js, dem Einstiegspunkt für das webpack zum Erstellen von bundle.js, das dann eingebunden wird Meine template.html-Datei als Skript-Tag. In meiner Vorlagendatei schließe ich auch giantFile.js als Skript-Tag ein, der die Funktion in singleFunction.js aufruft.

Ist es einfach, dass das Skript in der richtigen Reihenfolge importiert wird, oder irre ich in meinem Verständnis davon, wie gigantFile.js auf die neu erstellten Module zugreifen kann.

Zur Zeit, wenn ich singleFunction() eintippe, empfange ich "ist nicht definiert" Fehlermeldung, und so wäre es gut zu überprüfen, mein Verständnis ist richtig, wie ich Module vor dem weiteren Debuggen verwenden kann. Wenn jemand mich auf einige gute Ressourcen auf Refactoring Front-End-Javascript und beste Praktiken, die auch sehr geschätzt werden könnte, zeigen. Danke vielmals.

in singleFunction.js

`export default function singleFunction() {...}` 

in index.js

import singleFunction from './components/singleFunction' 

in template.js

<script src="/frontendHotness/components/singleFunction.js"></script> 
<script src="/unstructuredMess/js/giantFile.js"></script> 

Answer 1

Die webpack kompilierte Version Ihrer giantFile.js noch Ihrer Anwendung Eintrag sein sollte Punkt und die einzige Datei, die mit derin Ihre HTML-Datei eingebettet isttag.

Während des Refactorings sollten Sie schrittweise eingekapselte Funktionsbausteine ​​schrittweise in separate Dateien oder Module verschieben. Diese Module export die Funktionalität, die von abhängigen Modulen verwendet werden soll.

Ihr Stammmodul, in diesem Fall giantFile.js kann jetzt import die verschiedenen Module, auf die es ankommt. Diese Abhängigkeiten werden durch das Webpack gelöst, das Ihr Elternmodul mit allen Abhängigkeiten in eine JavaScript-Datei verschiebt, die Sie von Ihrer HTML-Seite laden können.

Beachten Sie, dass dieser Abhängigkeitsbaum beliebig tief sein kann - Ihre Submodule können selbst von anderen Modulen abhängen. Sie sollten jedoch sicherstellen, dass Ihre Module die Funktionalität für eine bestimmte Aufgabe kapseln, während sie lose mit anderen Modulen verbunden sind. Vermeiden Sie auch zirkuläre Abhängigkeiten.