Question

我有很多＆＃34; Uncaught ReferenceError：＆＃34;和＆＃34; jquery.waypoints.min.js：7未捕获的TypeError：无法读取属性＆＃34;我的凤凰/ elixir应用程序中的各种错误。这是因为js文件被连接或加载的顺序错误，以及我认为brunch插入的名称空间。但是所有设置都是默认设置，并且文档中没有任何设置。

我的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") %>">

我必须这样做几次，例如当图书馆没有将自己暴露为模块时。

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

1 个答案: