Ошибки в assets js и css при запуске приложения phoenix / elixir с настройкой по умолчанию с поздним завтраком

У меня много ошибок типа «Uncaught ReferenceError:» и «jquery.waypoints.min.js: 7 Uncaught TypeError: Cannot read property» в моем приложении Phoenix / Elixir. Это из-за неправильного порядка, в котором js-файлы объединяются или загружаются, и пространств имен, которые, как мне кажется, вставляются в бранч. Но все настройки по умолчанию, и в документации об этом ничего не сказано.

Мои js и css остались нетронутыми, как и brunch-config.js. Я использую bootstrap и jquery, а также свои собственные скрипты и файлы css. Как мне их правильно настроить? Должен ли я поместить свой jquery-скрипт и начальную загрузку в / vendor?

Вот мой файл brunch-config.js

exports.config = {
  files: {
    javascripts: {
      joinTo: {
        "js/app.js": /^(web\/static\/js)/,
        "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      },
    },

    stylesheets: {
      joinTo: {
        "css/app.css"
        templates: {
          joinTo: "js/app.js"
        }
      }
    },

    conventions: {
      assets: /^(web\/static\/assets)/
    },

    paths: {
      watched: [
        "web/static",
        "test/static"
      ],

      public: "priv/static"
    },

    plugins: {
      babel: {
        ignore: [/web\/static\/vendor/]
      }
    },

    modules: {
      autoRequire: {
        "js/app.js": ["web/static/js/app"]
      }
    },

    npm: {
      enabled: true,
      whitelist: ["phoenix", "phoenix_html"]
    }
  }
};

И мой app.js

import "phoenix_html"
import "jquery"
import "bootstrap"

jquery css phoenix-framework elixir brunch
person Community    schedule 18.09.2016    source источник
comment
Вы пытались использовать массив order, чтобы вручную указать порядок, например закомментированный код в сгенерированных по умолчанию brunch-config.js включает? См.   -  person Dogbert    schedule 18.09.2016
comment
@Dogbert, это не только проблема, вызванная порядком, это еще и импорт или что-то в этом роде.   -  person    schedule 18.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вариант 1:

Если вы хотите изменить порядок объединения файлов, вы можете сделать это внутри своего brunch-config.js:

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
      order: {
        before: [
          "web/static/vendor/js/jquery-2.1.1.js",
          "web/static/vendor/js/bootstrap.min.js"
        ]
      }
    }
  }
}

Вы можете сделать то же самое для CSS:

stylesheets: {
  joinTo: "css/app.css",
  order: {
    after: ["web/static/css/app.css"] // concat app.css last
  }
}

Дополнительную информацию можно найти в документации о бранче.

Обратите внимание: если вы воспользуетесь этим подходом, вам придется импортировать модуль внутри вашего app.js файла. Для JQuery, если вы установили его с помощью npm, это должно быть import $ from "jquery".

Вариант 2:

Вы также можете разместить нужные файлы внутри /priv/static/js и priv/static/css, а затем загрузить их изнутри вашего html (например, файла макета) следующим образом:

<script src="<%= static_path(@conn, "/js/myscript.js") %>"></script>
  <link rel="stylesheet" href="<%= static_path(@conn, "/css/mystyles.css") %>">

Мне приходилось делать это несколько раз, например, когда библиотека не открывала себя как модуль.

person Ege Ersoz    schedule 19.09.2016
comment
для 2-го варианта, что я должен поместить в brunch-config.js? - person ; 19.09.2016
comment
Ничего такого. Бранч отвечает за объединение и минимизацию указанных вами JS и CSS. Второй вариант в моем сообщении полностью обходит бранч. Вы можете думать об этом как о опции «Я буду обрабатывать эти файлы вручную». - person Ege Ersoz; 19.09.2016