加载和连接 js/jsx 文件

Question

我正在学习 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>

file1 中的所有内容都正常加载。

如果我在 file2/file3 中调用来自 file1 的东西，它会起作用。

但反过来，文件 2 和文件 3 之间也没有任何联系。

如果我在 file2 中有 var a = 10;，它在 file1 或 file3 中是未定义的。

file3 中的var a = 10; 也是如此。

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

我尝试将加载脚本标签放在不同的位置，尝试了不同的组合，但仍然不起作用。

我猜这是 babel 进行的“翻译”的问题，但如果我尝试将文件作为普通 js 加载，我会收到 Unexpected token < 语法错误。

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

附：一切都在 $(document).ready() 事件上进行测试。

Answer 1

一旦您不再只玩一个文件，最好开始使用 webpack 或 browserify 等构建工具。以下是使用 webpack 的入门项目。 ReactPatterns