使用默认设置和早午餐运行phoenix / elixir应用程序时，资产错误（js和css）

Question

I have a lot of "Uncaught ReferenceError:" and "jquery.waypoints.min.js:7 Uncaught TypeError: Cannot read property" kinds of errors in my phoenix/elixir app. This is because of the wrong order in which the js fileds are concatendated or loaded and namespaces which brunch inserts I think. But all the setting are default and there's nothing about that in the documenation.

My js and css are untouched, as well as brunch-config.js. I'm using bootstrap and jquery and my own scripts and css files. How can I set them up correctly? Should I put my jquery script and bootstrap into /vendor?

Here's my 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"]
    }
  }
};

And my app.js

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

Answer 1

Option 1:

If you want to change the order the files are concatenated, you can do this inside your 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"
        ]
      }
    }
  }
}

You can do the same for CSS:

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

You can read the Brunch docs for more info.

Note that if you go with this approach, you'll have to import the module inside your app.js file. For JQuery, assuming you installed it using npm, this should be import $ from "jquery" .

Option 2:

You can also place the files you want inside /priv/static/js and priv/static/css and then load them from inside your html (such as your layout file) like this:

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

I've had to do that a few times, such as when the library didn't expose itself as a module.