无需Node.js如何实现.pug文件与关联.js文件的数据交互（使用Parcel）

首先你之前的方案失效的核心原因是：Pug 的 #{name} 插值逻辑是 Parcel 构建阶段编译 Pug 为 HTML 时执行的，而 app.js 是后续浏览器加载页面后才运行的客户端脚本，两个阶段完全隔离，自然无法直接传值。

方案1：数据为构建阶段固定值，直接用 Pug 构建时插值 #

如果你要传递的数据不需要运行时动态生成，就可以把数据放在构建阶段能读取的配置文件里，通过 Parcel 内置的 Pug 转换器注入变量：

1. 把要传递的变量抽成独立的构建配置文件，比如新建 data.config.js：

// data.config.js （构建阶段读取，不要放浏览器端运行的逻辑）
module.exports = {
  name: "Holy Kiwi"
}

2. 项目根目录新建 .pugrc.js 配置文件，注入变量给 Pug 编译环境：

// .pugrc.js
const data = require('./data.config.js')
module.exports = {
  locals: data
}

配置完成后重启 npm start，你原来 index.pug 里的 p My name is #{name} 就能正常渲染出变量值，不需要额外改现有 Pug 代码，也不需要搭建 Node 后端。

方案2：数据为运行时动态值，浏览器端动态渲染 #

如果你的数据是运行时才拿到的（比如接口请求返回、用户交互生成），就放弃 Pug 构建时插值，用客户端 JS 赋值即可：

1. 修改 index.pug 给需要填充内容的位置加标识：

doctype html
html(lang="en")
    head
        title Homepage
    body
        p My name is <span id="name-wrap"></span>
        script(type="module", src="./app.js")

2. app.js 里选中对应元素填充内容：

const name = "Holy Kiwi"; // 可以替换成任意运行时获取的动态数据
document.querySelector('#name-wrap').textContent = name

原方案失效原因说明 #

• 从 app.js 导出变量：属于浏览器端 ES 模块的导出逻辑，Pug 构建阶段不会执行客户端 JS 代码，无法读取到导出值
• Pug 里直接写 import：Pug 的行内 JS 是构建阶段在 Node 环境执行的，默认不支持 ES 模块 import 语法，且此时还没有浏览器运行环境，执行浏览器端的 app.js 逻辑也会报错。

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