加載和連接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;相同var a = 10; 在文件3。

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

我嘗試將加載腳本標簽放在不同的位置，嘗試了不同的組合，但仍然無法正常工作。

我猜測這是babel進行的“翻譯”問題，但是如果我嘗試以普通js的形式加載文件，則會出現Unexpected token <語法錯誤。

連接多個jsx文件的正確方法是什么？

PS一切都在$（document）.ready（）事件上進行了測試。

Answer 1

一旦您不再使用一個文件，那么最好開始使用諸如webpack或browserify之類的構建工具。 這是使用webpack的入門項目。 ReactPatterns