菲尼克斯框架- jQuery连接

Question

jquery连接到菲尼克斯框架上的项目有问题。我已经通过npm安装安装了jQuery

npm

我将导入添加到app.js中。

import $ from 'jquery'

我在package.json的依赖关系

"jquery": "^3.4.1",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html"

但是在控制台我有错误

未定义ReferenceError：$未定义

我的js

<script>
    $("#login-btn").click(function(){
        console.log("Sign in button pressed");
    });
</script>

求你帮帮我。

Answer 1

您需要将这一行添加到assets/webpack.config.js中

const webpack = require('webpack');

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
]

和资产/js/app.js

import $ from 'jquery'
window.jQuery = $
window.$ = $

Answer 2

当您导入jQuery时，它仅在该模块中可用。它不会自动设置在window对象上，这是在script标记中搜索它的地方。

我不确定这是否是一个好做法，但在您的具体情况下，您可以尝试这样做：

import {$, jQuery} from 'jquery';

window.$ = $;
window.jQuery = jQuery;