使用Pug与Parcel时无法添加动态模板变量问题咨询

这其实是预期行为，核心原因在于Parcel处理Pug模板的流程和Express自带的Pug渲染流程是完全独立的两个系统，两者的模板变量（locals）不互通，具体拆解如下：

为什么会出现变量显示不一致的情况？ #

1. 使用Parcel中间件时的逻辑 #

当你通过bundler.middleware()让Parcel处理Pug文件时，Parcel会直接读取你配置的pug.config.js来编译模板，这个过程完全绕开了Express的Pug渲染机制。也就是说：

• 你在Express中间件里设置的res.locals.isAuthenticated属于Express的请求上下文，Parcel根本拿不到，所以模板里这个变量为空；
• 而env变量来自pug.config.js，是Parcel编译时直接读取的，所以能正常显示。

2. 使用Express的res.render()时的逻辑 #

当你用res.render('index', {...})时，是Express调用Pug引擎来渲染模板，这个过程不会读取pug.config.js里的配置：

• 你传入的isAuthenticated是直接传给Pug引擎的，所以能显示；
• 而pug.config.js里的env变量不在Express的渲染上下文里，自然为空。

解决办法：统一变量上下文 #

要让两种变量都能正常使用，你需要把两个来源的变量合并到同一个渲染上下文里，推荐两种方案：

方案一：放弃Parcel的Pug中间件，统一用Express渲染 #

这种方式更符合Express服务端渲染的常规流程，同时把pug.config.js里的变量合并到Express的res.locals中：

const path = require('path');
const express = require('express');
const pugConfig = require('./pug.config.js');
const app = express();

app
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'pug')
  .use(function(req, res, next) {
    // 合并静态配置的locals和动态生成的变量
    Object.assign(res.locals, pugConfig.locals, {
      isAuthenticated: 'true'
    });
    next();
  })
  // 用Express的路由+render代替Parcel中间件
  .get('/', (req, res) => {
    res.render('index');
  });

app.listen(3000);

方案二：如果必须保留Parcel中间件，通过环境变量传递动态值（有限场景适用） #

如果因为某些需求必须用Parcel处理Pug，那动态变量只能通过Parcel支持的方式传递——比如环境变量。你可以在启动Express时注入环境变量，然后在pug.config.js里读取：

# 启动时注入变量
IS_AUTHENTICATED=true node app.js

然后修改pug.config.js：

module.exports = {
  locals: {
    env: process.env.NODE_ENV,
    isAuthenticated: process.env.IS_AUTHENTICATED || 'false'
  }
}

⚠️ 注意：这种方式只适合启动时就能确定的静态动态变量，如果isAuthenticated需要根据每个请求的用户状态动态变化，这个方案就不适用了，还是推荐方案一。

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