Script область текста тега/бабеля

Во-первых, я понимаю, что text/babel не используется в производстве, но я нашел его весьма полезным для разработки, так как, когда я вношу изменения в мой файл .jsx, django dev webserver перезагрузится без меня, чтобы что-либо сделать (т. скомпилируйте JSX в JS после каждого изменения).

Я не контролирую среду сборки (например, django), поскольку это небольшой плагин для более крупной системы, которую я не разрабатываю.

Проблема заключается в следующем:

<script type="text/babel" src="{% static "myapp/js/main.jsx" %}"></script>

<script>
    $(function() {
      console.log(mything);
    }
</script>

Где mything находится в main.jsx, что-то простое:

var mything = "hello";

Если main.jsx - это javascript (и соответственно изменяется тип тегов script), тогда это будет работать нормально. Однако, как text/babel, это не сработает, потому что mything не входит в область видимости.

Uncaught ReferenceError: mything is not defined

Это имеет смысл для меня, так как я бы не ожидал, что теги script разных типов разделяют область видимости, но мне интересно, есть ли какой-нибудь умный способ обойти это, чтобы помочь развитию?

Я ранее имел весь код в одном блоке text/babel, но по мере его роста было бы неплохо разделить его на несколько файлов JSX.

Ответы

Ответ 1

Не погружаясь слишком глубоко в источник Бабеля (глядя на https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js), я собираюсь предположить, что он читает ваш источник JSX, выполняет преобразование на источнике, а затем eval источник каким-то образом его выполняет. Объём не разделяется, потому что babel добавляет 'use strict'; к преобразованному коду (стандарт в ES6).

Если вам действительно нужно выставить переменную, вы можете прикрепить ее к window (т.е. использовать window.mything в вашем JSX вместо просто mything). В идеале вы должны использовать модули, когда вы разбиваете код на несколько файлов. Вы можете использовать шаг построения, чтобы преобразовать свой код через Babel и использовать browserify/webpack для управления зависимостями.