如何向Phoenix项目添加CSS/JS依赖项? [英] How To Add CSS/JS Dependencies To Phoenix Project?

问题描述

我正在尝试将jquery添加到Phoenix项目.

I'm trying to add jquery to a Phoenix project.

当我直接在head标签中的app.html.eex中链接到jquery时，如下所示:

When I link to jquery direct in app.html.eex in the head tag like so:

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

...有效.

但是，我不需要网络依赖.我想要在应用程序中使用jQuery.

However, I don't want a web dependency. I want jquery within the app.

我已经将jquery.min.js复制到了web/static/js目录.并像这样在app.html.eex中引用了它:

I've copied jquery.min.js to the web/static/js directory. And referenced it in app.html.eex like so:

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

它不起作用.

将jquery.min.js复制到app.js也不起作用.

Copying jquery.min.js to app.js doesn't work either.

当我直接在app.html.eex中的脚本标签之间放置JS时，就很有趣了.

Interesting enough when I place the JS between script tags directly in app.html.eex, it works.

仅来自云的直接链接和/或将JS放置在app.html.eex中的脚本标签之间?

Only a direct link from the cloud and/or placing the JS between a script tag in app.html.eex is working??

更新:

Brunch正在将JS复制到priv目录中的app.js中.但是该应用程序似乎无法访问它.

Brunch is copying the JS to app.js in the priv directory. But the application doesn't seem to have access to it.

我在做什么错了.

推荐答案

我们建议您将供应商依赖项放在"web/static/vendor"中，因为这些依赖项通常不在ES6中，也不与JS加载器一起使用.另外，当您将它们添加到供应商时，它们会通过早午餐自动添加到内置的app.js中.

We recommend you to put vendor dependencies inside "web/static/vendor" because those dependencies are often not in ES6 nor work with JS loaders. Also, when you add them to vendor, they will be automatically added to the built app.js by brunch.

或者，您可以关注Dmitry的反馈.在这种情况下，您可以将文件放在"web/static/assets"中，并将其原样复制到您的应用程序中.例如，通过将其放在"web/static/assets/js/jquery-min.js"，您在帖子中定义的脚本标签应该可以使用.

Alternatively, you can follow Dmitry's feedback. In this case, you can place the file inside "web/static/assets" and it will be copied as is to your application. For example, by putting it at "web/static/assets/js/jquery-min.js", the script tag you have defined in your post should work.

研究了注释中给出的示例存储库后，该错误似乎在排序中:在jquery之前，bootstrap已包含在app.js文件中.您可以通过在brunch-config.js中添加以下内容来解决此问题(此处已经注释了类似的示例):

After studying the sample repository given in the comments, the bug seems to be in the ordering: bootstrap is being included in the app.js file before jquery. You can fix this by adding the following to your brunch-config.js (a similar sample is already commented in there):

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

我必须同意这并不明显.替代解决方案:

I have to agree this is not obvious. Alternative solutions:

1. 在供应商目录中订购它们，例如:1_jquery.min.js，2_bootstrap-toggle.min.js等.

1. Order them in your vendor directory, for example: 1_jquery.min.js, 2_bootstrap-toggle.min.js, etc.

将文件移动到"web/static/assets/js/jquery-min.js"等，然后在页面中为其添加显式脚本标签

Move the files to "web/static/assets/js/jquery-min.js" and so on and add explicit script tags for them in your pages

我希望这会有所帮助！

这篇关于如何向Phoenix项目添加CSS/JS依赖项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！