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

Question

我的 phoenix/elixir 应用程序中有很多“Uncaught ReferenceError:”和“jquery.waypoints.min.js:7 Uncaught TypeError: Cannot read property”之类的错误。这是因为我认为连接或加载 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"

Answer 1

选项 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
  }
}

您可以阅读Brunch docs 了解更多信息。

请注意，如果您采用这种方法，则必须在 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") %>">

我不得不这样做几次，例如当库没有将自己公开为模块时。