如何向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

在將庫復制到靜態工作時，我根本不喜歡它，因為它會為每個JS庫的每次更新（尤其是大型庫）更新git log 。

幸運的是，Phoenix官方支持通過npm / Brunch添加JS庫，它存在於文檔中： Static Assets - Javascript Libraries 。

這就是我在我的應用程序中添加jQuery方法：

添加了帶有版本號的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從早午餐轉為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

鳳凰城的依賴關系由Brunch.io管理。 默認情況下，它會將/web/static/assets/目錄中的所有內容復制到/priv/static 。

所以你可以在/web/static/assets/創建一些類似plugins目錄，並jquery.min.js那里復制jquery.min.js 。

Answer 4

我沒有足夠的聲譽來發表對@denis.peplin答案的評論（其中鏈接已過時）。 但似乎這是官方帖子（再次有一個Javascript Libraries部分）...

phoenixframework -博客-靜態資產

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

將依賴項添加到package.json

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

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

import $ from "jquery"