Grundlegendes Rescoping in create-react-app/webpack

Question

Ich bin ein relativer Neuling zu reagieren, obwohl ich eine funktionierende Reaktion App mit create-react-app erstellt habe.

Einer der Verkaufsargumente von reagieren scheint zu sein, dass Sie Code stückweise und nicht auf einmal migrieren können. Ich migriere jetzt eine bestehende Web-App und versuche zu sehen, ob ich sie innerhalb des create-react-app-Ökosystems mit minimalen Änderungen nutzen kann. Schritt 2 wird sein, es zu reagieren. Ich bin bei dem Schritt stecken 1. (Ich glaube, ich Schritt geschafft haben 0-getting es zu kompilieren alles, obwohl das eine lange Zeit in Anspruch nahm.)

ich die create-react-appindex.html mit meinem eigenen index.html ersetzt haben, und die create-react-appindex.js mit meiner eigenen Haupt-js-Datei, umbenannt in index.js. In der Vergangenheit wurde meine Hauptdatei mit einem <script>-Tag aus index.html geladen, und alle ihre Funktionen gingen in den globalen Gültigkeitsbereich. Scheinbar gehen sie jetzt nicht in den globalen Rahmen.

In index.html, ich habe:

<button type="button" id="connectButton" class="btn btn-success" onclick="connect()"> 
    Log on 
</button> 

In index.js, ich habe:

function connect() { 
    ... 
} 

in der Vergangenheit auf die Schaltfläche klicken würde die Funktion aufrufen, weil es im globalen Bereich war. Wenn Sie nun auf die Schaltfläche klicken, wird "ReferenceError: connect is not defined" generiert, weil es offensichtlich nicht in den globalen Gültigkeitsbereich fällt.

Jemand hat meine ursprüngliche Version dieser Frage abgelehnt, vielleicht weil ich nach etwas frage, das nicht "die reaktive Art, Dinge zu tun" ist. Ich bin mir dessen vollkommen bewusst, aber die Art und Weise, Menschen dazu zu bringen, Dinge auf "reaktive Weise" zu tun, besteht darin, ihnen zu zeigen, dass sie ihre Codebasen inkrementell migrieren können. Ich kann mir also nicht vorstellen, dass ich die einzige Person bin, die dieses Problem hatte. Meine Versuche zu googeln, schienen jedoch nichts hilfreiches zu geben.

Addendum: Ich sehe, dass ich dies umgehen kann, indem Sie window.connect = connect; nach der Funktionsdefinition einfügen, die es in den globalen Geltungsbereich setzt. Ich werde das als Antwort auf diese Frage hinzufügen, aber vielleicht hat jemand eine bessere Erklärung oder einen Workaround, in diesem Fall werde ich ihre Antwort akzeptieren. Vielen Dank.

Answer 1

Wie ich in der bearbeiteten Version der Frage bemerkte, fügt das Einfügen von window.connect = connect; nach der Funktionsdefinition es in den globalen Bereich ein und scheint so eine wirksame Problemumgehung zu sein.