Как добавить зависимости CSS/JS к проекту Phoenix?

Я пытаюсь добавить jquery в проект Phoenix.

Когда я ссылаюсь на jquery прямо в app.html.eex в главном теге, например:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

... Он работает.

Однако мне не нужна сетевая зависимость. Я хочу jQuery в приложении.

Я скопировал jquery.min.js в каталог web/static/js. И назовите его в app.html.eex следующим образом:

<script src="<%= static_path(@conn, "/js/jquery.min.js") %>"></script>

Это не работает.

Копирование jquery.min.js в app.js также не работает.

Интересно, когда я помещаю JS между тегами script непосредственно в app.html.eex, он работает.

Работает только прямая ссылка из облака и/или размещение JS между тегом script в app.html.eex?

Update:

Бранч копирует JS в app.js в личном каталоге. Но приложение, похоже, не имеет к нему доступа.

Что я делаю неправильно.

Ответы

Ответ 1

Мы рекомендуем вам устанавливать зависимости поставщиков внутри "web/static/vendor", потому что эти зависимости часто не входят в ES6 и не работают с загрузчиками JS. Кроме того, когда вы добавляете их поставщику, они автоматически добавляются к встроенному app.js бранч.

Кроме того, вы можете следить за отзывами Дмитрия. В этом случае вы можете поместить файл в "web/static/assets", и он будет скопирован как в ваше приложение. Например, поместив его в "web/static/assets/js/jquery-min.js", тег script, который вы определили в своем сообщении, должен работать.

Update

После изучения репозитория образца, приведенного в комментариях, ошибка выглядит в порядке: bootstrap включается в файл app.js перед jquery. Вы можете исправить это, добавив следующее в свой brunch-config.js(аналогичный пример уже прокомментирован):

  order: {
    before: [
      "web/static/vendor/js/jquery.min.js",
      "web/static/vendor/js/bootstrap-toggle.min.js"
    ]
  }

Я должен согласиться, что это не очевидно. Альтернативные решения:

  • Закажите их в каталоге вашего поставщика, например: 1_jquery.min.js, 2_bootstrap-toggle.min.js и т.д.

  • Переместите файлы в "web/static/assets/js/jquery-min.js" и т.д. и добавьте в них теги script

Надеюсь, это поможет!

Ответ 2

При копировании библиотек в статические приложения мне это совсем не нравится, потому что оно git log сильно загружает каждое обновление каждой библиотеки JS, особенно большое.

К счастью, Phoenix имеет официальную поддержку для добавления библиотек JS через npm/Brunch и присутствует в документации: Статические ресурсы - библиотеки Javascript.

Вот как я добавил jQuery в свое приложение:

ПРИМЕЧАНИЕ: это для Phoenix 1.3, см. инструкции для 1.4 ниже

jquery с номером версии добавлен в раздел зависимостей package.json:

{
  ...
  "dependencies": {
    ...
    "jquery": "3.2.1"
  }
}

Выполнена установка:

npm install --save

Добавлены глобальные переменные в раздел npm brunch-config.js:

npm: {
  enabled: true,
  globals: {
    $: 'jquery',
    jQuery: 'jquery'
  }
}

После перезапуска приложения я смог использовать $.

ОБНОВЛЕНИЕ для Феникса 1.4

Phoenix 1.4 переключился с Brunch на Webpack.

активы/package.json

{
  ...
  "dependencies": {
    ...
    "jquery": "3.3.1"
  }
}

активы/webpack.config.js

const webpack = require('webpack');
...
  plugins: [
  ...
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]

assets/js/app.js (это необязательно, но необходимо, чтобы $ было доступно в консоли Chrome)

window.$ = window.jQuery = require("jquery");

Run

(cd assets && npm install)

и перезапустите приложение Phoenix.

Ответ 3

Зависимости в Phoenix управляются Brunch.io. По умолчанию он копирует все из каталога /web/static/assets/ в /priv/static.

Итак, вы можете просто создать какой-то каталог, например plugins внутри /web/static/assets/, и скопировать jquery.min.js там.

Ответ 4

У меня недостаточно репутации, чтобы оставить комментарий к ответу от @denis.peplin (в котором ссылка устарела). Но, похоже, это официальный пост, о котором идет речь (опять же есть раздел Библиотеки Javascript)...

phoenixframework-блог-статические-активы

В моем случае сработало следующее:

Добавьте зависимость в package.json

"dependencies": {
  "jquery": "3.2.1"
},

Затем в assets/js/app.js добавьте следующую строку...

import $ from "jquery"