Статьи

Управление веб-зависимостями в игре с WebJars

Июнь 17, 2018

Обычная потребность в приложениях — это управление вашими веб-зависимостями, такими как Bootstrap и jQuery . Самый простой способ сделать это — загрузить соответствующие файлы, сохранить их в каталоге приложения и сослаться на них в приложении. У этого подхода есть пара недостатков.

Для начала не всегда понятно, какая версия ресурса была загружена. Иногда это кодируется в названии файла или в структуре каталога, например, «jquery-1.9.0.min.js», но я думаю, что ответственность за сохранение этого лежит на команде разработчиков. Другой недостаток, который я вижу в этом подходе, заключается в том, что он довольно ручной. Например, обновление версий библиотек JavaScript с их соответствующими зависимостями может быть довольно утомительным. Поэтому введите WebJars , очень простую библиотеку, которая интегрируется с Play, а также с другими веб-фреймворками, которая упаковывает веб-библиотеки на стороне клиента в файлы JAR и позволяет управлять ими как зависимостями SBT (или Maven и Gradle). Эта статья покажет вам шаги, необходимые для интеграции WebJars в пример приложения Play.

  1. Предполагая, что вы начинаете с ванильного приложения Play, первое, что вам нужно сделать, это отредактировать файл build.sbt . Добавьте зависимость WebJar. Ваш файл build.sbt должен выглядеть следующим образом.
    name := "sample-play-with-webjars"

version := "1.0-SNAPSHOT"

libraryDependencies ++= Seq(
  javaJdbc,
  javaEbean,
  cache,
  "org.webjars" %% "webjars-play" % "2.2.0"
)     

play.Project.playJavaSettings
  2. Добавьте зависимость WebJars, такую ​​как Bootstrap, в файл build.sbt . Вы можете найти список зависимостей на официальном сайте WebJars . Я включаю Bootstrap в свое приложение Play в качестве примера.
    name := "sample-play-with-webjars"

version := "1.0-SNAPSHOT"

libraryDependencies ++= Seq(
  javaJdbc,
  javaEbean,
  cache,
  "org.webjars" %% "webjars-play" % "2.2.0",
  "org.webjars" % "bootstrap" % "3.0.1"
)     

play.Project.playJavaSettings
  3. Теперь перейдите к файлу conf / routs и добавьте маршрут к контроллеру WebJarsAssets, который будет использоваться при доступе к зависимостям.
    # Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                           controllers.Application.index()

# Map static resources from the /public folder to the /assets URL path
GET     /assets/*file               controllers.Assets.at(path="/public", file)

GET     /webjars/*file                    controllers.WebJarAssets.at(file)
  4. Теперь добавьте ссылку на загрузочный css из вашего файла app / views / main.scala.html через только что определенный маршрут WebJar.
    Это должно выглядеть так:
    @(title: String)(content: Html)
<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <link rel='stylesheet' href='@routes.WebJarAssets.at(WebJarAssets.locate("css/bootstrap.min.css"))'>
        <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    </head>
    <body>
        @content
    </body>
</html>
  5. Чтобы доказать, что все работает, я изменил app / views / index.scala.html, чтобы использовать пример индикатора выполнения из Bootstrap, чтобы сделать действительно очевидным, что WebJars настроен правильно и что зависимость Bootstrap разрешена. Ваш файл должен выглядеть следующим образом:
    @(message: String)

@main("Testing out WebJars") {

      <div class="page-header">
        <h1>Progress bars</h1>
      </div>
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
      </div>
}
  6. Теперь, если вы запустите приложение и перейдете по адресу http: // localhost: 9000, ваша домашняя страница по умолчанию должна выглядеть следующим образом.
    $ play run

Пример кода для этой статьи
здесь . Я надеюсь, что эта статья продемонстрировала вам лучший способ управления вашими веб-зависимостями.

41
Share: