znacznik tekstu skryptu/zakres zmiennej babel

Question

Po pierwsze, rozumiem, że text/babel nie jest do użytku w produkcji, ale okazało się, że jest całkiem użyteczne dla rozwoju, ponieważ po wprowadzeniu zmiany w moim pliku .jsx serwer Django zostanie przeładowany bez konieczności wykonywania żadnych czynności cokolwiek (tj. kompilacja JSX do JS po każdej zmianie).

Nie kontroluję środowiska kompilacji (np. Django), ponieważ jest to niewielka wtyczka do większego systemu, którego nie rozwijam.

Problem jest taki:

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

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

Gdzie mything jest w main.jsx, coś tak prostego jak:

var mything = "hello"; 

Jeśli main.jsx jest JavaScript (oraz rodzaj znaczników skryptu zostanie odpowiednio zmieniona) to zadziała dobrze. Jednak jako text/babel nie zadziała, ponieważ mything nie znajduje się w zasięgu.

Uncaught ReferenceError: mything is not defined 

to sens dla mnie, bo nie spodziewałbym tagów skryptu różnych typów podzielić się zakres, ale zastanawiam się, czy jest jakiś sprytny sposób obejść ten problem do pomocy rozwoju?

Poprzednio miałem cały kod w jednym bloku text/babel, ale w miarę jego rozwoju dobrze byłoby podzielić go na kilka plików JSX.

Answer 1

Bez zbytniego nurkowania w źródle Babel (patrząc na https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js), zamierzam odgadnąć, że odczytuje twoje źródło JSX, wykonuje transformację na źródle, a następnie eval jest źródłem w jakiś sposób, aby go wykonać. Zasięg nie jest dzielony, ponieważ babel przedkłada 'use strict'; do przekształconego kodu (standard w ES6).

Jeśli naprawdę potrzebujesz eksponować zmienną, możesz dołączyć ją do window (tj. Użyj window.mything w swoim JSX zamiast tylko mything). Najlepiej byłoby użyć modułów podczas dzielenia kodu na wiele plików. Możesz użyć kroku kompilacji, aby przekształcić swój kod za pomocą Babel i użyć browserify/webpack do zarządzania zależnościami.