在create-react-app / webpack中重新确定基本问题

Question

虽然我使用create-react-app创建了一个功能正常的反应应用程序，但我是一个相对较新的反应者。

反应的一个卖点似乎是你可以一次性地而不是一次性地迁移代码。我现在正在迁移现有的Web应用程序，并尝试查看是否可以在create-react-app生态系统中以最少的修改来运行它;第2步将反应它。我被困在第1步。（我想我已经管理了第0步 - 让它完全编译 - 虽然这需要很长时间。）

我用我自己的create-react-app替换了index.html index.html，用我自己的主js文件替换了create-react-app index.js，更名为index.js。在过去，我的主文件加载了<script>的index.html标签，其所有功能都进入了全局范围。显然现在他们没有进入全球范围。

在index.html，我有：

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

在index.js，我有：

function connect() { 
    ... 
}

在过去，单击该按钮将调用该函数，因为它位于全局范围内。现在，单击按钮会生成“ReferenceError: connect is not defined”，因为它显然不会进入全局范围。

有人贬低了我对这个问题的原始版本，也许是因为我问的不是“做事的反应方式”。我完全意识到这一点，但让人们做出“反应方式”的方法是向他们展示他们可以逐步迁移代码库的方式。所以我无法想象我是唯一一个遇到这个问题的人。不过，我在网上搜索的尝试似乎并没有带来任何帮助。

附录：我看到我可以通过在函数定义之后插入window.connect = connect;来解决这个问题，这将它放在全局范围内。我将补充一点作为这个问题的答案，但也许有人有更好的解释或解决方法，在这种情况下我会接受他们的答案。谢谢。

Answer 1

正如我在问题的编辑版本中所述，在函数定义之后插入window.connect = connect;将其置于全局范围内，因此似乎是一种有效的解决方法。