如何添加CSS / JS的依赖关系凤凰计划？

Question

我试图jQuery的添加到凤凰项目。

当我链接到jQuery的直接在app.html.eex头标记，像这样：

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

...有用。

不过，我不希望网络的依赖。我想在应用程序内的jQuery。

我已经复制jquery.min.js到web /静态/ 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在私法目录app.js。但是，应用程序似乎并不能够访问它。

我究竟做错了什么。

Answer 1

我们建议你把供应商的依赖内部“网络/静态/供应商”，因为这些依赖关系往往不ES6也不与JS装载机工作。此外，当您将它们添加到供应商，他们将被自动添加到早午餐内置app.js。

另外，您也可以按照梅德的反馈。在这种情况下，你可以把里面的“网/静态/资产”的文件，它会保持原样复制到您的应用程序。例如，通过将其在“网络/静态/资产/ JS / jQuery的min.js”，你已经在您的文章中定义的脚本标签应该工作。

Update

研究在评论中给出的样本库后，错误似乎是在排序：引导被列入jQuery的前app.js文件。您可以通过添加以下到您的早午餐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. 移动文件到“网络/静态/资产/ JS / jQuery的min.js”等，并在页面中添加明确的脚本标签为他们

我希望这有帮助！

Answer 2

虽然复制库静态的作品，我不喜欢它，因为它象垃圾一样清除git log很多关于每一个JS库的每次更新，尤其是一个大的。

幸运的是，凤凰有官方支持通过NPM /早加入JS库和它存在的文档中：Static Assets - Javascript Libraries。

这就是我添加到jQuery我的应用程序：

注：这是菲尼克斯1.3，请参见下面的说明1.4

新增jquery用版本号package.json的依赖关系部分：

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

进行安装：

npm install --save

新增全局到npm的brunch-config.js部分：

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

应用程序重新启动后，我能够使用$。

更新凤凰1.4

凤凰1.4从早切换到的WebPack。

资产/的package.json

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

资产/ webpack.config.js

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

资产/ JS / app.js（这个是可选的，但需要做的Chrome控制台提供$）

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

跑

(cd assets && npm install)

并重新启动应用程序凤凰。

Answer 3

在凤凰城的依赖关系是由Brunch.io管理。默认情况下，它会将一切从/web/static/assets/目录/priv/static。

所以，你可以简单地创建一些喜欢里面plugins /web/static/assets/目录复制jquery.min.js那里。

Answer 4

我没有足够的声誉后，从@答案denis.peplin（其中链接已经过期）的注释。但似乎这被称为（再有一个JavaScript库部分）官爵...

phoenixframework-blog-static-assets

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

添加依赖关系package.json

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

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

import $ from "jquery"