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在问题评论和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>

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

1 个答案: