如何将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变量中，并将其作为参数传递给导出的函数。

这种方式有点笨拙。您有没有更好的处理方法呢？

谢谢！

- user1496984

---

我完全有同样的问题。我正在使用React编写另一个系统的插件（与Ember相比，我真的很喜欢这种易于实现的方法，因为Ember想要控制整个显示），该插件使用django模板。插件扩展点依赖于一些模板化值。我将我的Webpack捆绑成一个库并导出了一个单独的函数，该函数以缺失的模板化值作为参数。我完全同意这感觉非常笨拙，但我认为我们正在合并两种根本不同的方法，所以这是可以预期的！ - dpwr

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>   

- rrauenza