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

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也不起作用.

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

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

更新:

早午餐正在将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"
    ]
  }

我不得不同意这一点并不明显.替代方案:

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

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

我希望这有帮助!

Answer 2

在将库复制到静态工作时,我根本不喜欢它,因为它git log为每个JS库的每次更新都会造成很大的破坏,尤其是大型库.

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

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

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

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

执行安装:

npm install --save

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

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

应用程序重启后,我就可以使用了$.

Phoenix 1.4的更新

Phoenix 1.4从早午餐转为Webpack.

资产/的package.json

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

资产/ 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应用程序.

Answer 3

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

所以你可以简单地创建一些目录，比如pluginsinside/web/static/assets/并复制jquery.min.js到那里。