Глобальные переменные в файле JSX не загружаются

Question

В HTML файле, порядок файлов сценариев включены как JSX файлы, а затем JS-файлов, как,

<script src="global.jsx" type="text/jsx"></script> 
<script src="app.js" type="text/javascript"></script> 

В global.jsx, код,

var abc = {ab: 1, ba: 2} 
console.log("from jsx file " + abc) 

В app.js, код,

console.log("from js file " + abc) 

В браузере app.js печатает ошибки, то global.jsx выводит значение переменной, как :::

app.js -----> ReferenceError: abc is not defined 
global.jsx -----> from jsx file [Object object] 

Как браузер запустить код в обратном порядке, даже если в HTML файл, JSX загружается первым, а затем JS загружается?

И как можно объявить глобальные браузеры внутри jsx-файла и сделать его доступным для других файлов js/jsx?

Answer 1

Вы должны предварительно скомпилировать свой файл, global.jsx, в файл JavaScript, а не полагаться на функцию транспилятора, если хотите быть уверенным в поведении определенного сценария.

В файле global.jsx не не компилируется до более поздней стадии (когда transpiler грузы и JSX находит все script теги с type="text/jsx"), это на самом деле компилируется и выполняется как JavaScript после файл app.js уже выполнен.

Есть и другие несколько хакерских обходных решений, но я бы предложил предварительную компиляцию и, возможно, полагаться на систему связывания, чтобы каждый JavaScript был загружен за один раз (и все зависимости будут загружены в правильном порядке).

Answer 2

Из того, что я могу найти в Интернете, поведение заключается в том, что браузер сначала загружает файлы javascript, которые могут потребоваться для рендеринга любых реагирующих компонентов. Поэтому я предполагаю, что это ожидаемое поведение. Я могу подтвердить, что обратное, то есть установив значение abc в js и получив доступ к работам jsx. Однако я не мог найти много работы.

Хотя this можно использовать. Я предполагаю. Первоначальная цель - лениво загружать тяжелые сценарии. В идеале, я думаю, вам нужно будет использовать привязку js -> jsx.