javascript - 加载和连接 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 之间根本没有连接。

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

同样适用于var a = 10;在文件3中。

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

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

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

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

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

Answer 1

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