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

【问题标题】：How to pass Django template variables to a WebPack module如何将 Django 模板变量传递给 WebPack 模块
【发布时间】：2015-08-10 11:29:57
【问题描述】：

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

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

谢谢！

【问题讨论】：

我遇到了完全相同的问题。我正在使用 React 为另一个系统编写一个插件（我真的很喜欢与使用 django 模板的 Ember 相比，这很容易做到）。插件扩展点依赖于几个模板值。我将我的 webpack 包构建为一个库，并导出了一个函数，该函数将缺少的模板值作为参数。我完全同意这感觉很笨拙，但我认为我们正在合并两种根本不同的方法，所以这是意料之中的！

标签： javascript python django webpack

【解决方案1】：

根据 dpwrussel 在问题 cmets 和 this question 中的提示，这是我的做法：

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

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>

【讨论】：