Jak przekazać zmienne szablonowe Django do modułu WebPack

Question

Właśnie poznaję moduł WebPack, i mam na myśli przeniesienie całej infrastruktury JS mojej aplikacji Django do modułów. Wydaje się, że prostym sposobem na to jest utworzenie modułu Webpack dla każdego szablonu (lub widoku) Django i posiadanie pojedynczej etykiety <script> na każdej stronie.

Jednak staram się znaleźć sposób przekazywania zawartości zmiennych szablonu Django do tych modułów pakietu WWW. Wcześniej mógł te zmienne inlined:

<script> 
//Sample code.. 
var arr = []; 
{% for s in vars %} 
arr.push(s); 
{% endfor %} 
</script> 

Teraz mam tylko:

<script src="temp.js"></script> 

Potencjalnym rozwiązaniem znalazłem jest określenie modułu WebPACK się biblioteka, która eksportuje jedną funkcję root globalna przestrzeń nazw w przeglądarce. Następnie użyj wbudowanego znacznika script, aby umieścić zmienne Django w zmiennej JS i przekazać to jako argumenty do wyeksportowanej funkcji.

To jakoś wydaje się niezręcznym sposobem robienia rzeczy. Jakieś pomysły, jak mogę sobie z tym poradzić lepiej?

Dzięki!

Answer 1

Oto jak zrobiłem to w oparciu o podpowiedź dpwrussel w komentarzach na pytanie i this question:

W moim modułu, który mam przywozu, mogę to zrobić:

var React = require('react') 
var ReactDOM = require('react-dom') 

window.render_my_thing = function(properties) { 
    ReactDOM.render(...) 
} 

Następnie w mój szablon django, dodaję:

<script>                   
    render_my_thing({ 
     property1: "{{ property1 }}", 
     property2: "{{ property2 }}", 
    })                 
</script>