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

Question

我正在尝试将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中也不起作用。

有趣的是，当我直接在app.html.eex中使用

- Emily

Answer 1

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

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

更新

在研究评论中提供的示例存储库后，似乎问题在于顺序：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. 将它们按顺序排列在您的供应商目录中，例如：1_jquery.min.js, 2_bootstrap-toggle.min.js等。

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

希望这可以帮助你！

- José Valim

---

谢谢。但是我肯定错过了些什么。我已经将js添加到供应商文件夹中。然后运行node node_modules / brunch / bin / brunch build。 js显示编译在priv / static / js中，但似乎在应用程序中无法正常工作。但是，在app.html.eex中直接的Web链接确实有效。这可能是什么原因？有解决方法吗？ - Emily

你在GitHub上有展示这个问题的应用程序吗？我很乐意帮你看一下。 :) - José Valim

好的，我解决了。这是一个排序问题！我已经更新了答案。 - José Valim

你好，我对Phoenix非常陌生（今天是我的第二天），我想将jquery.js库添加到我的应用程序中，我按照上面的步骤进行了操作，但仍然出现“$未定义”的错误... 我甚至克隆了上面的github链接（github.com/makeitgreat/phoenix_a_b_test），但仍然出现相同的错误...请帮助我解决这个问题，因为我已经浪费了两天时间来解决它。 - KJ_kaka

@JoseValim 我按照以下步骤进行操作。1）mix phoenix.new inceptionApp --database mysql，2）cd inceptionApp/，3）提供用户名凭据，4）mix ecto.create，5）mix ecto.migrate，然后下载jquery.js文件并将其放置在此文件夹web/static/vendor/js中，然后我启动了服务器6）mix phoenix.server，但仍然出现相同的错误“Uncaught ReferenceError：$未定义”，这是我的repo https://github.com/vikasd02/incApp - KJ_kaka

Answer 2

虽然将库复制到静态文件夹可以实现功能，但我并不喜欢这种方式。因为每当更新JS库时，特别是大型库，都会使git log变得非常混乱。

幸运的是，Phoenix框架官方支持通过npm/Brunch添加JS库，并在文档中有相关说明：静态资源 - JavaScript库。

以下是我如何将jQuery添加到我的应用程序中：

注意：此方法适用于Phoenix 1.3，Phoenix 1.4需要查看相应的说明

在package.json的依赖部分添加带版本号的jquery：

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

执行了安装操作：

npm install --save

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

Translated text:

将全局变量添加到 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应用程序。

- denis.peplin

---

运行得非常顺利！ - Qqwy

目前你可能需要输入 $: 'jQuery', jQuery: 'jQuery'。 - Peter David Carter

感谢Phoenix 1.4版本更新！！这是我第一次看到非Brunch的提及。否则，我仍然会在我的目录中挑选寻找不存在的“brunch-config.js”文件。天哪。 - havoc1

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

Answer 3

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

因此，您可以在/web/static/assets/中创建一个名为plugins的目录，并将jquery.min.js复制到其中。

- Dmytro Biletskyi

Answer 4

我没有足够的声望来评论@denis.peplin的答案（其中链接已过期）。但是看起来这是官方帖子（再次有JavaScript库部分）所指的...

phoenixframework-blog-static-assets

在我的情况下，以下方法有效：

将依赖项添加到package.json中

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

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

import $ from "jquery"

- sweeneydavidj