如何向PugJS过滤器传递变量？及jsTransformer-handlebars浏览器打包方案

嘿，针对你遇到的Pug过滤器结合jstransformer-handlebars无法使用本地变量的问题，我来梳理下可行的解决方案～

核心结论：浏览器端部署jstransformer-handlebars确实能解决问题 #

Pug过滤器是在编译阶段执行的，这时候还拿不到运行时的本地变量（locals）；而把jstransformer-handlebars移到浏览器端后，Handlebars模板的渲染会延迟到页面运行阶段，自然就能获取到动态的本地变量了。

下面是具体的实现步骤：

1. 打包jstransformer-handlebars为浏览器可用的文件 #

jstransformer-handlebars本身是Node.js模块，需要用打包工具（比如Webpack）转换为浏览器能识别的代码。

步骤细节：

• 先安装依赖：

  npm install jstransformer-handlebars handlebars webpack webpack-cli --save-dev
  

• 创建入口文件browser-transformer.js，把核心模块暴露到全局：

  // 引入jstransformer-handlebars和原生Handlebars
  const handlebarsTransformer = require('jstransformer-handlebars');
  const Handlebars = require('handlebars');
  
  // 挂载到window对象，方便浏览器全局调用
  window.handlebarsTransformer = handlebarsTransformer;
  window.Handlebars = Handlebars;
  

• 配置Webpack（新建webpack.config.js）：

  module.exports = {
    entry: './browser-transformer.js',
    output: {
      filename: 'handlebars-transformer.bundle.js',
      path: __dirname + '/dist',
      library: 'HandlebarsTransformer' // 也可以用全局变量方式暴露
    },
    target: 'web' // 指定打包目标为浏览器环境
  };
  

• 执行打包命令：

  npx webpack --mode production
  

  打包完成后，dist目录下的handlebars-transformer.bundle.js就是浏览器可用的文件。

2. 在浏览器中结合Pug使用Handlebars并传入本地变量 #

现在要调整Pug模板的写法，让它输出未编译的Handlebars原始代码，而不是用过滤器提前编译：

<!-- 把Handlebars模板放在script标签里，避免被Pug解析 -->
script#hb-template(type="text/x-handlebars-template")
  Hello {{name}}! Your score is {{score}}.

然后在浏览器端，等Pug渲染完页面后，手动调用jstransformer渲染模板：

// 假设这是你的本地变量（可以来自后端接口或前端逻辑）
const locals = { name: 'Edward', score: 95 };

// 获取Handlebars模板字符串
const templateStr = document.getElementById('hb-template').innerHTML;

// 用jstransformer渲染模板
const renderResult = window.handlebarsTransformer.render(templateStr, locals);

// 把渲染结果插入到页面指定位置
document.getElementById('render-target').innerHTML = renderResult.body;

3. 处理Handlebars辅助函数 #

因为我们已经把原生Handlebars暴露到全局了，注册辅助函数的方式和平时完全一致：

// 注册一个自定义辅助函数：把文本转大写
window.Handlebars.registerHelper('uppercase', function(text) {
  return text.toUpperCase();
});

之后就能在Handlebars模板里直接使用：

Hello {{uppercase name}}!

额外注意事项 #

• 如果你是在服务器端编译Pug模板，一定要确保Handlebars的代码块被原样输出，不要被Pug的语法解析器处理。
• 打包时可以开启Webpack的Tree Shaking（production模式默认开启），减少最终bundle的体积。

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