如何向Phoenix项目添加CSS / JS依赖项？

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

当我在头标记的app.html.eex中链接到jquery时，如下所示：

…有用。

但是，我不想要Web依赖。 我想在应用程序中使用jquery。

我已将jquery.min.js复制到web / static / js目录。 并在app.html.eex中引用它，如下所示： 

 <script src="">

它不起作用。

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

有趣的是，当我直接在app.html.eex中将脚本标记放在JS之间时，它可以工作。

只有来自云的直接链接和/或将JS放在app.html.eex中的脚本标记之间才能正常工作？

更新：

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

我究竟做错了什么。

我们建议您将供应商依赖项放在“web / static / vendor”中，因为这些依赖项通常不在ES6中，也不适用于JS加载程序。 此外，当您将它们添加到供应商时，它们将通过早午餐自动添加到构建的app.js 。

或者，您可以关注德米特里的反馈。 在这种情况下，您可以将文件放在“web / static / assets”中，它将按原样复制到您的应用程序中。 例如，通过将其放在“web / static / assets / js / jquery-min.js”中，您在post中定义的脚本标记应该有效。

更新

在研究了评论中给出的示例存储库之后，错误似乎在于排序：在jquery之前，bootstrap被包含在app.js文件中。 您可以通过在brunch-config.js中添加以下内容来解决此问题（类似的示例已在此处进行了注释）： 

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

我不得不同意这一点并不明显。 替代方案：

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

  2. 将文件移动到“web / static / assets / js / jquery-min.js”等，并在页面中为它们添加显式脚本标记

我希望这有帮助！

在将库复制到静态工作时，我根本不喜欢它，因为它会为每个JS库的每次更新（特别是大型库）更新git log 。

幸运的是，Phoenix官方支持通过npm / Brunch添加JS库，它存在于文档中： Static Assets – Javascript Libraries 。

这就是我将jQuery添加到我的应用程序中的方法：

将版本号的jquery添加到package.json依赖项部分： 

 { ... "dependencies": { ... "jquery": "3.2.1" } }

执行安装： 

 npm install --save

将全局变量添加到brunch-config.js npm部分： 

 npm: { enabled: true, globals: { $: 'jquery', jQuery: 'jquery' } }

应用程序重启后，我可以使用$ 。

凤凰城的依赖关系由Brunch.io管理。 默认情况下，它会将/web/static/assets/目录中的所有内容复制到/priv/static 。

所以你可以在/web/static/assets/创建一些类似plugins目录，并jquery.min.js那里复制jquery.min.js 。

我没有足够的声誉来发表对@denis.peplin（其链接已过时）答案的评论。 但似乎这是官方post（再次有一个Javascript Libraries部分）…

phoenixframework -博客-静态资产

在我的情况下，以下工作：

将依赖项添加到package.json 

 "dependencies": { "jquery": "3.2.1" },

然后在assets/js/app.js添加以下行… 

 import $ from "jquery"
Interesting Posts