未加载 jsx 文件中的全局变量
Global variables in jsx file are not loaded
在html文件中，脚本文件的顺序是jsx文件然后是js文件，
<script src="global.jsx" type="text/jsx"></script>
<script src="app.js" type="text/javascript"></script>
在global.jsx中，代码是，
var abc = {ab: 1, ba: 2}
console.log("from jsx file " + abc)
在app.js中，代码是，
console.log("from js file " + abc)
在浏览器中 app.js 打印错误，然后 global.jsx 将变量值打印为：::
app.js -----> ReferenceError: abc is not defined
global.jsx -----> from jsx file [Object object]
即使在 html 文件中先加载 jsx 然后再加载 js，浏览器如何 运行 反向代码？
如何在 jsx 文件中声明浏览器全局变量并使其可用于其他 js/jsx 文件？
根据我在 Internet 上可以找到的内容，行为是浏览器首先加载 javascript 文件，这可能是呈现任何 React 组件所必需的。所以我想这是一种预期的行为。我可以确认反过来，即在 js 中设置 abc 的值并从 jsx 访问有效。不过，我找不到很多解决方法。
虽然我猜可以使用this。最初的目的是延迟加载繁重的脚本。理想情况下，我猜你必须使用 js -> jsx 绑定。
如果您想确保特定的脚本加载行为，您应该将文件 global.jsx 预编译为 JavaScript 文件，而不是依赖转译器功能。
因为你的 global.jsx 文件直到后面的步骤才被编译（当 JSX 转换器加载并找到所有带有 type="text/jsx" 的 script 标签时），它实际上正在被编译和执行因为 JavaScript 在 之后 app.js 文件已经执行。
还有其他一些有点棘手的解决方法，但我建议预编译并可能依赖捆绑系统，以便一次加载所有 JavaScript（并且所有依赖项都将加载到正确的顺序）。
在html文件中，脚本文件的顺序是jsx文件然后是js文件，
<script src="global.jsx" type="text/jsx"></script>
<script src="app.js" type="text/javascript"></script>
在global.jsx中，代码是，
var abc = {ab: 1, ba: 2}
console.log("from jsx file " + abc)
在app.js中，代码是，
console.log("from js file " + abc)
在浏览器中 app.js 打印错误，然后 global.jsx 将变量值打印为：::
app.js -----> ReferenceError: abc is not defined
global.jsx -----> from jsx file [Object object]
即使在 html 文件中先加载 jsx 然后再加载 js，浏览器如何 运行 反向代码？
如何在 jsx 文件中声明浏览器全局变量并使其可用于其他 js/jsx 文件？
根据我在 Internet 上可以找到的内容，行为是浏览器首先加载 javascript 文件，这可能是呈现任何 React 组件所必需的。所以我想这是一种预期的行为。我可以确认反过来，即在 js 中设置 abc 的值并从 jsx 访问有效。不过，我找不到很多解决方法。
虽然我猜可以使用this。最初的目的是延迟加载繁重的脚本。理想情况下，我猜你必须使用 js -> jsx 绑定。
如果您想确保特定的脚本加载行为，您应该将文件 global.jsx 预编译为 JavaScript 文件，而不是依赖转译器功能。
因为你的 global.jsx 文件直到后面的步骤才被编译（当 JSX 转换器加载并找到所有带有 type="text/jsx" 的 script 标签时），它实际上正在被编译和执行因为 JavaScript 在 之后 app.js 文件已经执行。
还有其他一些有点棘手的解决方法，但我建议预编译并可能依赖捆绑系统，以便一次加载所有 JavaScript（并且所有依赖项都将加载到正确的顺序）。