加载和连接js/jsx文件

我正在学习ReactJS，当它在一个文件中时，一切都很好。

我像这样加载<script type="text/babel" src="js/test.js"></script>，因为如果我使用类型"text/javascript"，浏览器就无法读取jsx事件，尽管我已经看到了这种类型的例子。

当我将函数和变量拆分到不同的文件中时，问题就出现了。

假设我有像一样加载的file1.js（纯js）、file2.js、file3.js（jsx）

<script type="text/javascript" src="js/file1.js"></script>
<script type="text/babel" src="js/file2.js"></script>
<script type="text/babel" src="js/file3.js"></script>

文件1中的所有内容都正常加载。

如果我在file2/file3中调用来自file1的东西，它就可以工作了。

但另一方面，在文件2和文件3之间根本没有连接。

如果我在文件2中有var a = 10;，那么它在文件1或文件3中是未定义的。

与文件3中的var a = 10;相同。

如果在变量初始化后我有console.log("I'm going through file2");，它确实会在控制台中打印，但该变量在文件1和文件3中仍然未定义。

我试着把加载脚本标签放在不同的地方，尝试不同的构图，但仍然不起作用。

我猜这是babel所做的"翻译"的问题，但如果我试图将文件加载为普通的js，我会得到Unexpected token <语法错误。

连接多个jsx文件的正确方法是什么？

附言：所有内容都在$（document）.ready（）事件上测试。