【问题标题】:How to enable minified JavaScript files in Play 2.3.1 templates?如何在 Play 2.3.1 模板中启用缩小的 JavaScript 文件?
【发布时间】:2014-08-26 05:23:18
【问题描述】:

我能够在我的 Play Framework 2.3.1 应用程序中加载 sbt-uglify 1.0.3 插件。加载未缩小的 javascripts 非常简单,但加载缩小版本似乎是不可能的。

在我的模板中,我使用了类似这样的<script> 标签:

<script src="@routes.Assets.at("javascripts/app.js")"></script>

在开发模式下,加载了未缩小的 javascript 版本,这很好。在 prod 模式下(使用 activator start),我看到 sbt-uglify 将缩小版本生成到 target/web/uglify/build 文件夹,但是因为我没有在我的模板中更改上述 &lt;script&gt; 标记行,所以非缩小版本的javascripts 文件已加载。

有没有办法对此类路由进行仅 prod 映射以加载缩小版本?

【问题讨论】:

    标签: javascript playframework sbt minify uglifyjs


    【解决方案1】:

    问题Reverse Router should use minified assets in production automatically 已在 Play 2.3.1 中修复,完全符合您的要求。

    根据Play 2.3.1 Changelog

    资产反向路由器的行为已更改(如果已缩小) 资产版本存在,它现在返回这些版本的 URL。到 禁用此行为,设置 assets.checkForMinified=true in application.conf.

    注意它应该改为 set assets.checkForMinified=false,但无论如何...

    以下内容仅在生产模式下有效,因此使用activator start 而不是run 启动应用程序或使用生成的启动脚本(在stage 之后)。

    在使用@routes.Assets.versioned(而不是routes.Assets.at)的Play 版本中默认启用在生产中使用资产缩小版本的行为。

    它确实要求conf/routes 中的适当路由声明是:

    GET  /assets/*file  controllers.Assets.versioned(path="/public", file: Asset)
    

    起初我发现有点不清楚的是pipelineStages 中元素的顺序,以及在其中包含sbt-rjs 的要求。

    就在我写下关于我在Play 2.3 Migration Guide 的“RequireJS”部分找到的顺序的句子之后:

    阶段的顺序很重要。你首先要优化 文件,生成它们的摘要,然后生成所有文件的 gzip 版本 结果资产。

    我还在“闭包编译器”部分的Play 2.3 Migration Guide 中找到:

    UglifyJS 2 目前通过 RequireJS 插件提供(描述 下一个)。未来的目的是提供一个独立的 UglifyJS 2 插件也适用于不使用 RequireJS 的情况。

    一切都始于对Play 2.3 sbt-web plugin Javascript minification的回答。

    所以,下面的pipelineStages 是有效的——注意顺序和rjs

    pipelineStages := Seq(rjs, uglify, digest, gzip)
    

    project/plugins.sbt使用如下:

    resolvers += "Typesafe repository" at "http://repo.typesafe.com/typesafe/releases/"
    
    addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.3.5")
    
    addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.0.0")
    
    addSbtPlugin("com.typesafe.sbt" % "sbt-uglify" % "1.0.3")
    
    addSbtPlugin("com.typesafe.sbt" % "sbt-gzip" % "1.0.0")
    
    addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.6")
    

    不要忘记创建一个空的app/assets/javascripts/main.js 文件让sbt-rjs 完成它的工作。

    作为测试,我使用 activator new playApp play-scala 创建了一个 Play 应用程序,并在构建以及 app/views/main.scala.html 中应用了上述更改,最终看起来如下(注意 @routes.Assets.versioned):

    @(title: String)(content: Html)
    
    <!DOCTYPE html>
    
    <html>
        <head>
            <title>@title</title>
            <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
            <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
            <script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
        </head>
        <body>
            @content
        </body>
    </html>
    

    执行activator start 并调用curl http://localhost:9000 给出(为了可读性而格式化我的):

    ➜  play-uglify  curl http://localhost:9000
    
    <!DOCTYPE html>
    
    <html>
        <head>
            <title>Welcome to Play</title>
            <link rel="stylesheet" media="screen" href="/assets/stylesheets/d41d8cd98f00b204e9800998ecf8427e-main.css">
            <link rel="shortcut icon" type="image/png" href="/assets/images/84a01dc6c53f0d2a58a2f7ff9e17a294-favicon.png">
            <script src="/assets/javascripts/4302136334616ae0605d47a1932ee262-hello.min.js" type="text/javascript"></script>
        </head>
        <body>
            <h1>Your new application is ready.</h1>
        </body>
    </html>
    

    注意4302136334616ae0605d47a1932ee262-hello.min.js 和消化的非JavaScript资源。

    【讨论】:

    • 我也在尝试使用 uglify。但是,我不知道如何从 Play 开始。如果你有例子,可以分享一下吗?
    • 如您所述,我将 uglify、digest、gzip 添加到 project + pipelineStages 中。我还更改了视图中的 '@routes.Assets.at' -> '@routes.Assets.versioned'。使用“activator start”启动我的应用程序会生成缩小的 javascript,但浏览器仍会加载原始的非缩小版本。
    • 嗨@Jacek 我遵循您提到的所有上述步骤。但是当执行activator start 命令时,我收到以下错误。 [info] Done packaging. java.util.regex.PatternSyntaxException: Unmatched closing ')' near index 47 ['"]?([^\s'"]*)['"]?\s*:\s*[\[]?.*['"].*/lib\(.*)['"]
    • 这一切都有效(非常感谢!)但有一个小问题。 Play default 提供缩小版本(这很好),但原始源代码也可以在以下位置公开获得:/assets/javascripts/private-javascript-file.js.src.js。有没有办法删除这些文件并只保留缩小和.map 文件?
    • 我只是不知道,建议在此问题的后续行动中提出这个问题。我认为值得作为一个关于 SO 的问题。加油!
    猜你喜欢
    • 2023-03-06
    • 2016-05-14
    • 1970-01-01
    • 2012-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多