Pug v3.0.2编写ES6 Module importmap脚本报错如何解决

两个Pug语法规则使用错误导致问题：

• 标签后加.声明内嵌文本块时，块内所有内容必须比当前标签多缩进1级。你的JSON内容和script(type="importmap")标签缩进层级相同，Pug会把开头的{识别为独立的标签语法，触发unexpected text解析错误。
• !{}是Pug服务端非转义插值语法，包裹的代码会在Node.js编译阶段执行，不会输出到客户端浏览器，所以之前写的console.log只会打印在服务端日志。

注意importmap对应的JSON内容比script标签多缩进1级即可，块内内容会原封不动输出到最终HTML：

body
    script(async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js")

    script(type="importmap").
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
            }
        }

    script(type="module" src="js/bundle.js")

• 内嵌文本块的缩进要统一，要么全用空格要么全用制表符，只要比父标签多1级缩进就能被正确识别，多缩进不影响解析，但不能和父标签同层级。
• script块内写客户端代码时不要加Pug插值语法，直接写原生JS/JSON内容即可，块内内容不会被Pug服务端解析执行，会原样输出到HTML文件中。
• 普通无type属性的script块遵循完全相同的缩进规则，你之前测试通过的script. console.log("hello")写法，本质也是因为块内代码和script标签保持了正确的缩进差。

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