Pug模板中用扩展运算符/Object.assign合并对象失败的解决方法

首先明确核心问题：你当前的写法大概率是混淆了Pug服务器端变量和客户端JS变量的作用域，导致config在main.pug的客户端脚本中无法被正确访问，进而合并失败。以下分两种场景给出解决方案：

场景1：config是客户端全局JS变量 #

如果config是要在浏览器端使用的JS对象，需确保它是全局可访问的：

修改base.pug #

把config定义在script.标签内，并挂载到window上，让其他脚本能访问：

script.
  window.config = { name: 'abc', age: 25 };

main.pug中合并对象 #

此时可以直接使用ES6展开运算符或Object.assign完成合并：

include base.pug

script.
  const baseObj = { tech: 'js' };
  // 方案1：ES6展开运算符
  const mergedObject = { ...window.config, ...baseObj };
  // 方案2：兼容旧浏览器的Object.assign
  const mergedObjectCompat = Object.assign({}, window.config, baseObj);

场景2：config是Pug服务器端变量 #

如果config是在Pug模板的服务器端定义的（用于模板渲染逻辑），需要把它转换为客户端可识别的JS对象：

base.pug（服务器端变量定义） #

用-开头定义服务器端变量：

- const config = { name: 'abc', age: 25 };

main.pug中传递并合并 #

通过Pug的插值语法!{}把服务器端变量转为客户端JS对象：

include base.pug

script.
  // 将服务器端变量序列化为客户端JS对象
  const config = !{JSON.stringify(config)};
  const baseObj = { tech: 'js' };
  const mergedObject = { ...config, ...baseObj };

原代码失效的原因 #

1. 若config是服务器端变量：客户端脚本中的config属于未定义状态，自然无法合并。
2. 若config是客户端变量：用const定义的变量作用域仅限于当前script.标签，其他脚本无法访问，必须挂载到window成为全局变量。

注：pug-runtime 2.0.1不影响ES6语法的使用，若需兼容极旧浏览器，优先使用Object.assign替代展开运算符。

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