create-react-app / webpack 中的基本问题重新界定

Question

虽然我已经使用 create-react-app.

创建了一个正常运行的 React 应用程序，但我是 React 的新手

React 的卖点之一似乎是您可以零碎地迁移代码，而不是一次全部迁移。我现在正在迁移现有的 Web 应用程序，并尝试查看是否可以通过最少的修改让它在 create-react-app 生态系统中运行；第 2 步将对其进行反应。我卡在了第 1 步。（我想我已经完成了第 0 步——让它编译——尽管这花了很长时间。）

我已经将 create-react-app index.html 替换为我自己的 index.html，将 create-react-app index.js 替换为我自己的主 js 文件，重命名为 index.js。过去，我的主文件加载了来自 index.html 的 <script> 标记，并且它的所有函数都进入了全局范围。显然现在他们没有进入全球范围。

在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”，因为显然它不会进入全局范围。

有人否决了我对这个问题的原始版本，也许是因为我问的不是 "the react way of doing things." 我完全知道这一点，而是让人们做事的方式 "the react way" 是向他们展示一种可以增量迁移代码库的方法。所以我无法想象我是唯一遇到这个问题的人。不过，我尝试使用谷歌搜索似乎没有找到任何有用的东西。

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

Answer 1

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

create-react-app / webpack 中的基本问题重新界定

Basic issue re scoping in create-react-app / webpack

reactjs

webpack

create-react-app