如何使用 Pug 縮小/丑化內聯 JavaScript？

Question

我正在將 Pug 用於我正在構建的網頁。 在模塊的末尾，我有一個script. 標記（不能使用常規script標記，因為它與 jQuery 不兼容）：

script.

    // load more videos
    $("#btn-more").click(() => {
        $.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
            .done((videos) => {
                $(videos).ready(() => {
                    $("#videos").replaceWith(videos)
                })
            })
    })

最終生成未縮小的代碼：

<script>// load more videos
$("#btn-more").click(() => {
    $.get(`en/videos?quantity=6`)
        .done((videos) => {
            $(videos).ready(() => {
                $("#videos").replaceWith(videos)
            })
        })
})</script>

有沒有辦法讓 Pug 縮小代碼？ 我還沒有弄清楚如何在script. 標簽。

Answer 1

腳本：uglify-js

// load more videos
$("#btn-more").click(() => {
    $.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
        .done((videos) => {
            $(videos).ready(() => {
                $("#videos").replaceWith(videos)
            })
        })
})

Answer 2

1. 首先確保安裝了JSTransformer Uglify JS

npm i jstransformer-uglify-js

2. 現在，您應該能夠使用:uglify-js過濾器呈現以下模板。

script: :uglify-js
    $("#btn-more").click(() => {
        $.get(`#{lang}/videos?quantity=#{numVideos + 2}`)
            .done((videos) => {
                $(videos).ready(() => {
                    $("#videos").replaceWith(videos)
                })
            })
    })