Question

在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文件？

Answer 1

如果要确保特定的脚本加载行为，则应将文件global.jsx预编译到JavaScript文件中，而不是依赖于转换器功能。

由于您的global.jsx文件尚未编译，直到后续步骤（当JSX转换程序加载并找到script所有type="text/jsx"标记时），它实际上是在 app.js文件已经执行之后编译并执行为JavaScript 。

还有其他一些hacky变通方法，但我建议预编译并可能依赖于捆绑系统，以便一次加载所有JavaScript（并且所有依赖项将以正确的顺序加载）

Answer 2

从我在互联网上可以找到的行为是浏览器首先加载javascript文件，这可能是渲染任何反应组件所必需的。所以我猜这是一种预期的行为。我可以确认反向，即在js中设置abc的值并从jsx访问是有效的。虽然我找不到很多解决方法。

虽然我可以使用this。最初的目的是懒洋洋地加载繁重的脚本。理想情况下，我猜你必须使用js - ＆gt; jsx绑定。