Question

我试图将jquery添加到Phoenix项目中。

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

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

......它有效。

但是，我不想要Web依赖。我想在应用程序中使用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.但该应用程序似乎无法访问它。

我做错了什么。

Answer 1

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

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

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

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

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

我希望这有帮助！

Answer 2

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

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

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

为jquery

添加了package.json版本号到依赖项部分

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

执行安装：

npm install --save

在npm的{{1}}部分添加了全局变量：

brunch-config.js

应用重新启动后，我可以使用npm: { enabled: true, globals: { $: 'jquery', jQuery: 'jquery' } }。

凤凰城1.4的更新

凤凰城1.4从Brunch转为Webpack。

资产/的package.json

资产/ webpack.config.js

{
  ...
  "dependencies": {
    ...
    "jquery": "3.3.1"
  }
}

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

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

运行

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

并重新启动Phoenix应用程序。

Answer 3

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

因此，您只需在plugins内创建/web/static/assets/之类的目录，然后在其中复制jquery.min.js。

Answer 4

我没有足够的声誉在@ denis.peplin（其中链接已过时）的回答中发表评论。但似乎这是所提到的官方帖子（同样有一个Javascript Libraries部分）......

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

将依赖项添加到package.json

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

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

import $ from "jquery"