如何在无Node.js环境的Django项目中使用d3-cloud库？

d3-cloud本质是跑在用户浏览器端的前端渲染库，你看到源码里的CommonJS语法只是它开发阶段的模块写法，和Django后端运行环境没有任何关系，全程不需要在开发/部署环境安装Node.js就能用，具体操作如下：

• 不要直接引用仓库里的CommonJS规范源码文件：浏览器本身不识别require、module.exports语法，直接用官方提前编译好的、浏览器可直接运行的UMD版本文件即可。你可以提前把编译后的d3.layout.cloud.js下载到Django项目的静态资源目录，比如static/js/路径下，不需要任何本地构建步骤。
• 在对应的Django模板中按正确顺序引入依赖：必须先引入兼容版本的d3.js（推荐用d3 v5版本，和d3-cloud兼容性最好，v6+版本存在API差异容易报错），再引入你存到静态目录的d3-cloud文件，示例写法用Django自带的static模板标签：

<script src="{% static 'js/d3.min.js' %}"></script>
<script src="{% static 'js/d3.layout.cloud.js' %}"></script>

• 引入完成后，浏览器全局会直接挂载d3.layout.cloud方法，和你用Node工具构建出来的使用效果完全一致。词云的布局计算、渲染全在用户侧浏览器完成，Django后端只需要负责返回词云需要的文本、权重数据即可，可以通过模板直接渲染到前端脚本，也可以通过异步接口返回数据。
• 最简调用示例如下，你可以根据自己的业务需求调整参数：

// 词云数据示例，实际使用时可替换为Django传递的后端数据
const wordData = [
  {text: "Django", size: 52},
  {text: "词云", size: 30},
  {text: "前端", size: 26}
]

d3.layout.cloud().size([800, 600])
  .words(wordData)
  .padding(5)
  .rotate(() => Math.random() > 0.5 ? 90 : 0)
  .fontSize(d => d.size)
  .on("end", renderCloud)
  .start()

function renderCloud(words) {
  d3.select("#word-cloud-box").append("svg")
    .attr("width", 800)
    .attr("height", 600)
    .append("g")
    .attr("transform", "translate(400,300)")
    .selectAll("text")
    .data(words)
    .enter().append("text")
    .style("font-size", d => `${d.size}px`)
    .attr("text-anchor", "middle")
    .attr("transform", d => `translate(${d.x},${d.y})rotate(${d.rotate})`)
    .text(d => d.text)
}

排错提示：如果引入后报方法不存在、变量未定义的错误，优先检查两个问题：一是有没有误把未编译的CommonJS源码文件当成前端资源引入，二是d3和d3-cloud的引入顺序、版本是否匹配。

内容的提问来源于stack exchange，提问作者Shale