如何在Pug文件中访问外部JavaScript对象以生成datalist？

你遇到的核心问题是：Pug-cli编译模板时，默认不会自动加载外部JS文件中的变量，所以wiz1在你的Pug模板里是undefined，导致each循环尝试读取undefined的length属性而抛出错误。下面提供两种无需修改wizardSpells.js的解决方案：

方案一：使用Pug的include指令加载JS文件 #

Pug的include指令可以直接导入并执行JS文件，将文件内的变量注入到模板作用域中。只需在你的datalist.pug开头添加一行include语句（注意路径要匹配你的文件实际位置）：

// datalist.pug
include ../wizardSpells.js  // 示例路径：若wizardSpells.js和pug目录同级则用此路径，根据实际调整
datalist(id='wiz1-spells')
  each val, key in wiz1
    option(value=val.school) key

比如如果wizardSpells.js放在pug目录下，路径就改成./wizardSpells.js。执行原来的编译命令：

pug .\pug\datalists.pug -o ./html -P

就能生成包含所有选项的datalist了。

方案二：用Node.js的vm模块读取变量（兼容更复杂场景） #

如果include指令因为某种原因不生效（比如JS文件里有特殊语法），可以用Node的vm模块手动执行JS文件并提取变量，同样不需要修改原JS文件：

// datalist.pug
- const fs = require('fs');
- const vm = require('vm');
// 读取外部JS文件内容
- const spellFileContent = fs.readFileSync('../wizardSpells.js', 'utf8');
// 在独立上下文执行文件，获取变量
- const context = {};
- new vm.Script(spellFileContent).runInNewContext(context);
- const wiz1 = context.wiz1;

datalist(id='wiz1-spells')
  each val, key in wiz1
    option(value=val.school) key

这个方法通过读取文件内容、在隔离的上下文执行代码，把wiz1变量提取到模板作用域中，灵活性更高。

原理说明 #

Pug-cli在Node环境下编译模板，模板的作用域是独立的——外部JS文件的变量不会自动进入模板，必须通过显式的加载（include或手动读取执行）才能让Pug访问到这些变量。

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