Phoenix Framework - соединение jQuery

Question

У меня проблема с подключением jquery к моему проекту на Phoenix Framework. Я установил jQuery через npm install

npm i jquery

Я добавил импорт в app.js.

import $ from 'jquery'

Мои зависимости в пакете. json

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

Но в консоли у меня есть ошибка

Uncaught 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"
  })
]

и assets / js / app.js

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

Answer 2

Когда вы импортируете jQuery, он доступен только в этом модуле. Он не устанавливается автоматически на объект окна, где его ищут в этом теге script.

Я не уверен, что это хорошая практика, но в вашем конкретном случае вы можете попробоватьсделать что-то вроде:

import {$, jQuery} from 'jquery';

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