如何使用 npm 将 jquery 添加到 phoenix 1.3答案

【问题标题】：How to add jquery to phoenix 1.3 using npm如何使用 npm 将 jquery 添加到 phoenix 1.3
【发布时间】：2018-07-07 04:39:27
【问题描述】：

有good official phoenix docs 解释如何添加npm 依赖（甚至使用jquery）。显然，我在这里遗漏了一些东西。这是我所拥有的：

在 Mac OSX 上使用 elixir 1.6、phoenix 1.3 和 node 8.9。

assets/js/app.js 包含：

import $ from 'jquery';

assets/brunch-config.js 包含：

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

package.json 包含：

 "dependencies": {
    "jquery": "^3.3.1",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html"
  }

我的“应用程序逻辑” - 在从 assets/js/app.js 导入的 js 文件中：

$(function () {
  alert('Hello');
});

通过简单地（手动）将jquery.min.js 从assets/node_modules/query/dist 复制到assets/vendor 来解决问题。但我很想了解使用npm 和早午餐资产管道自动包含有什么问题。

【问题讨论】：

还有什么问题？你有什么错误吗？
您是否在视图中加载生成的public/app.js 文件？示例：github.com/phoenix-examples/hello_phoenix/blob/master/web/…
是的，我是 - 如上所述，jquery 函数等都加载到浏览器中。除非我还将 jquery.mins.js 添加到供应商，否则无法识别 $。否则 app.js 会按预期加载。
@Dogbert - 问题是 $ 未被识别。似乎执行上述操作（根据凤凰官方文档）仍然不足以成功加载 jquery（并在窗口对象（全局）上找到 $。
如果我有某种疏忽，请不要责备官方文档，因此请提前道歉。希望我只是忽略了一些东西。

【解决方案1】：

app.js 中不需要import $ from 'jquery';

在assets/brunch-config.js 中改为：

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

（您在顶部npm 部分中有额外的npm 部分）

我之前回答过类似的问题，但仍然是真实的：https://stackoverflow.com/a/43265955/1173020

【讨论】：