create-react-app/webpackの基本的な問題のスコープ

Question

create-react-appを使用して機能する反応アプリを作成しましたが、反応するのは比較的新人です。

反応のセールスポイントの1つは、コード全体を一度に移行するのではなく、少しずつ移行することができるようです。私は現在、既存のWebアプリケーションを移行しており、最小限の変更でcreate-react-appエコシステム内で機能させることができるかどうかを確認しようとしています。ステップ2はそれを反応させることである。私はindex.html自分でcreate-react-appindex.htmlを交換したステップ1（私はステップ0-なって、それがすべてで-がコンパイルすることは、長い時間がかかったが管理していると思います。）

で立ち往生し、create-react-appindex.jsています私自身のメインのjsファイルで、index.jsに名前が変更されました。以前は、私のメインファイルに<script>タグ（index.html）がロードされ、そのすべての機能がグローバルスコープに入っていました。どうやら彼らはグローバルな範囲に入っていないようです。 index.htmlで

、私が持っている：index.jsで

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

を、私が持っている：過去に

function connect() { 
    ... 
} 

を、それがグローバルスコープであったため、ボタンをクリックすると、関数を呼び出します。ボタンをクリックすると、 "ReferenceError: connect is not defined"が生成されます。これは明らかにグローバルスコープには入っていないからです。

誰かがこの質問のオリジナル版を下落させました。おそらく、私は「何かをする反応の仕方」ではないことを尋ねているからです。私はそれを完全に認識していますが、人々に「反応する方法」を実行させる方法は、コードベースを段階的に移行できる方法を示すことです。だから私はこの問題を抱えている唯一の人だとは思わない。私の試みはグーグルでは役に立ちませんでした。

補足：関数定義の後にwindow.connect = connect;を挿入することで、この問題を回避できることがわかります。これはグローバルスコープに入れます。私はこの質問の答えとしてそれを追加しますが、誰かがより良い説明や回避策を持っているかもしれません。その場合、私は彼らの答えを受け入れます。ありがとうございました。

Answer 1

私が質問の編集バージョンで述べたように、関数定義の後にwindow.connect = connect;を挿入すると、それがグローバルスコープに置かれるため、効果的な回避策のようです。