加载和连接 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 中未定义。

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

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

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

我猜这是 babel 生成的 "translation" 的问题，但如果我尝试将文件作为普通 js 加载，我会收到 Unexpected token < 语法错误。

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

P.S。一切都在 $(document).ready() 事件上进行了测试。

Answer 1

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

加载和连接 js/jsx 个文件

Loading and Connecting js/jsx files

javascript

reactjs

react-jsx