reactjs - jsx 文件中的全局变量未加载

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 转译器加载并找到所有带有 type="text 的 script 标记时)/jsx")，它实际上是在 app.js 文件执行之后作为 JavaScript 进行编译和执行的。

还有其他一些有点 hacky 的解决方法，但我建议预编译并可能依赖捆绑系统，以便一次性加载所有 JavaScript(并且所有依赖项都将以正确的顺序加载)。