如何在脚本中定义tracery生成随机句子？及相关报错排查

核心问题分析 #

报错Uncaught ReferenceError: tracery is not defined以及无法生成句子，本质是脚本加载时机冲突+DOM元素未就绪导致的，和你是否正确引入tracery文件无关。

具体修复步骤 #

1. 删掉重复的tracery脚本 #

你同时引入了tracery.js和tracery.min.js，这两个是同一个库的完整版和压缩版，重复加载会引发冲突，只保留压缩版即可：

<!-- 只留这一行，删掉另一个tracery脚本引入 -->
<script defer src="js/tracery/tracery.min.js"></script>

2. 调整自定义脚本的位置 #

你的自定义脚本写在<head>里，会在<body>和tracery脚本加载完成前执行——这时候既找不到tracery对象，也找不到output元素。解决办法有两种：

• 方案一：把脚本移到body末尾
  确保DOM元素和外部脚本都加载完再执行代码：

  <body>
  <div id="output"></div>
  <!-- 脚本放在body最后 -->
  <script>
  var data = {
    "origin": "#salutation#, #name#",
    "salutation": ["Hi", "Good morning", "Good evening", "Good night"],
    "name": ["John", "Mary", "Peter", "Anne"]
  };
  var grammar = tracery.createGrammar(data);
  var sentence = grammar.flatten("#origin#");
  document.getElementById("output").innerHTML = sentence;
  </script>
  </body>
  

• 方案二：给自定义脚本加defer属性
  让它和tracery脚本一起等DOM解析完再执行，注意要放在tracery脚本之后：

  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script defer src="js/tracery/tracery.min.js"></script>
  <!-- 加defer，放在tracery脚本后面 -->
  <script defer>
  var data = {
    "origin": "#salutation#, #name#",
    "salutation": ["Hi", "Good morning", "Good evening", "Good night"],
    "name": ["John", "Mary", "Peter", "Anne"]
  };
  var grammar = tracery.createGrammar(data);
  var sentence = grammar.flatten("#origin#");
  document.getElementById("output").innerHTML = sentence;
  </script>
  </head>
  

3. 验证脚本路径 #

确认tracery.min.js的路径js/tracery/tracery.min.js和你的实际文件目录一致，避免路径错误导致脚本加载失败。

修正后的完整代码示例 #

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script defer src="js/tracery/tracery.min.js"></script>
</head>
<body>
<div id="output"></div>
<script>
var data = {
  "origin": "#salutation#, #name#",
  "salutation": ["Hi", "Good morning", "Good evening", "Good night"],
  "name": ["John", "Mary", "Peter", "Anne"]
};
var grammar = tracery.createGrammar(data);
var sentence = grammar.flatten("#origin#");
document.getElementById("output").innerHTML = sentence;
</script>
</body>
</html>

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