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

Posted 2023-03-07

【中文标题】如何将 CSS/JS 依赖添加到 Phoenix 项目？

【英文标题】：How To Add CSS/JS Dependencies To Phoenix Project?

【发布时间】：2016-03-31 22:38:32

【问题描述】：

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

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

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

...有效。

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

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

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

它不起作用。

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

当我将 JS 直接放在 app.html.eex 中的脚本标签之间时，它已经足够有趣了。

只有来自云端的直接链接和/或将 JS 放在 app.html.eex 中的脚本标签之间才有效？？

更新：

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

我做错了什么。

【参考方案1】：

在将库复制到静态作品时，我一点也不喜欢，因为每次更新每个 JS 库，尤其是大型库时，它都会浪费git log 很多东西。

幸运的是，Phoenix 官方支持通过 npm/Brunch 添加 JS 库，文档中有此支持：Static Assets - Javascript Libraries。

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

注意：这适用于 Phoenix 1.3，请参阅下面的 1.4 说明

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

  ...
  "dependencies": 
    ...
    "jquery": "3.2.1"
  

执行安装：

npm install --save

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

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

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

Phoenix 1.4 更新

Phoenix 1.4 从 Brunch 切换到 Webpack。

assets/package.json

  ...
  "dependencies": 
    ...
    "jquery": "3.3.1"
  

assets/webpack.config.js

const webpack = require('webpack');
...
  plugins: [
  ...
    new webpack.ProvidePlugin(
      $: "jquery",
      jQuery: "jquery"
    )
  ]

assets/js/app.js（这是可选的，但需要使 $ 在 Chrome 控制台中可用）

window.$ = window.jQuery = require("jquery");

运行

(cd assets && npm install)

并重新启动 Phoenix 应用程序。

【讨论】：

像魅力一样工作！

目前您可能需要输入$: 'jQuery', jQuery: 'jQuery'。

感谢 Phoenix 1.4 更新！！这是我遇到的第一次提到非早午餐。否则我仍然会在我的目录中挑选不存在的“brunch-config.js”文件。嘘。

顺便说一句：我的 Phoenix 1.4 项目中没有“assets/app.js”。你的意思是“assets/js/app.js”吗？

【参考方案2】：

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

phoenixframework-blog-static-assets

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

将依赖添加到package.json

"dependencies": 
  "jquery": "3.2.1"
,

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

import $ from "jquery"

【参考方案3】：

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

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

更新

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

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

我不得不同意这并不明显。替代解决方案：

在您的供应商目录中对它们进行排序，例如：1_jquery.min.js、2_bootstrap-toggle.min.js 等。

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

我希望这会有所帮助！

【讨论】：

谢谢。不过，我一定在某处遗漏了一些东西。我已将 js 添加到供应商文件夹中。然后运行节点 node_modules/brunch/bin/brunch 构建。 js 显示在 priv/static/js 中编译，但它似乎在应用程序中不起作用。然而，在 app.html.eex 中指向 js 的直接 Web 链接确实有效。什么可能导致这种情况？有什么解决办法吗？

您在 GitHub 上是否有显示该问题的应用程序？我很乐意看看。 :)

要清楚，如果您使用供应商，您仍然需要在布局中使用这一行：<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

非常感谢。这里是 github：github.com/makeitgreat/phoenix_a_b_test 如果你导航到：localhost:4000/test_a.html & localhost:4000/test_b.html 你可以看到这个错误。 test_b.html.eex 有外部 css & JS 链接。 test_a.html.eex 没有。 JS & CSS 显示在 priv 目录 app.js & app.css

好的，我解决了。这是一个订购问题！我已经更新了答案。

【参考方案4】：

Phoenix 中的依赖项由Brunch.io 管理。 默认情况下，它将所有内容从/web/static/assets/ 目录复制到/priv/static。

所以你可以简单地在/web/static/assets/ 中创建一些像plugins 这样的目录，然后复制jquery.min.js 那里。