如何将Django模板变量传递给WebPack模块

Question

我刚学习WebPack模块,我正在考虑将我的Django应用程序的整个JS基础架构移动到模块.似乎这样做的一种简单方法是为每个Django模板(或视图)创建一个webpack模块,并<script>在每个页面上都有一个标记.

但是,我正在尝试找到一种将Django模板变量的内容传递给这些webpack模块的方法.以前我可以将这些变量内联:

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

现在,我只有:

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

我发现一个可能的解决方案是将webpack模块定义为一个库,它将单个根函数导出到浏览器中的全局命名空间.然后使用内联script标记将Django变量放入JS变量中,并将其作为参数传递给导出的函数.

这在某种程度上感觉像是一种笨拙的做事方式.关于如何更好地处理这个问题的任何想法？

谢谢!

Answer 1

根据 dpwrussel 在问题评论和这个问题中的提示，我是这样做的：

在我要导入的模块中，我这样做：

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

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

然后在我的 django 模板中添加以下内容：

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