Laravel 5 WebPack JQuery - $ не определен
У меня есть webpack.min.js:
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
})
]
};
});
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
и package.json:
"devDependencies": {
"jquery": "^3.3.1",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
}
и в моем скрипте нижнего колонтитула лезвия:
@section('footer')
<script type = "text/javascript">
if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }
$(function() {
$('#cc-number').validateCreditCard(function(result) {
$('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
+ '<br>Valid: ' + result.valid
+ '<br>Length valid: ' + result.length_valid
+ '<br>Luhn valid: ' + result.luhn_valid);
});
});
</script>
@endsection
после того, как я запустил npm run dev и загрузил свою страницу, я получаю сообщение об ошибке:
Uncaught ReferenceError: $ is not defined
а у меня alert(jQuery.fn.jquery); не срабатывает
как мне загрузить jquery из npm, чтобы затем я мог использовать его во встроенном HTML-коде в клинке?
Ответы 4
Попробуйте это в своем файле main.js
global.$ = global.jQuery = require('jquery');
в любом случае, добавление global.$ = global.jQuery = require('jquery'); в resources/assets/scripts/index.js решает проблему - Спасибо!
Для тех, кто нашел эту тему с помощью Laravel 5.8: Если у вас есть тег <script src = "{{ asset('js/app.js') }}" defer></script> в вашем app.blade.php, просто переместите его в конец тега body и удалите оператор defer. Это должно решить проблему и по-прежнему нормально работать с vue.js
У меня возникла эта проблема в Laravel 5.7, когда я попытался использовать некоторые из представленных по умолчанию представлений. Я пытался использовать JavaScript (который требовал использования jQuery) в некоторых шаблонах представления лезвий, которые расширяли стандарт layout/app.blade.php template.
Но для меня проблема не былоwindow.$ не назначается библиотеке window.jQuery, потому что она добавлялась в отношении файла resources/js/bootstrap.js. (Это файл, который, по-видимому, предварительно скомпилирован в public/js/app.js с помощью Laravel Mix. Вы можете убедиться, что это так, заглянув в webpack.mix.js, в нем вы найдете это утверждение:
mix.js('resources/js/app.js', 'public/js')
где
resources/js/app.js требует resources/js/bootstrap.js.
Если вы хотите вручную скомпилировать это для себя, сначала запустите:
npm install, затем npm run dev в режиме разработки или npm run prod в режиме производства.
но в любом случае (я отвлекся) ....
Оказалось, что проблема была здесь:
resources/views/layouts/app.blade.php
Был экземпляр тега скрипта с таким атрибутом отсрочки:
<script src = "{{ asset('js/app.js') }}" defer></script>
Этот атрибут defer был причиной всех проблем.
Я удалил его вот так:
<script src = "{{ asset('js/app.js') }}"></script>
и проблема отсутствия определения jQuery была решена.
Я предпочитаю отложить загрузку JavaScript, просто переместив теги сценария ближе к концу тега HTML body.
этот статус defer кажется необходимым, если вы используете Vue.js. Если вы просто переместите тег <script> в конец тега <body>, он также будет работать нормально. Не уверен, почему они его туда поставили
В моем случае это вызывало проблемы, даже если я уже поместил тег скрипта в конец тела. Для чего конкретно этот defer?
в app.blade.php
<script src = "{{ asset('js/app.js') }}" defer></script>
убери отсрочку, так сделай это
<script src = "{{ asset('js/app.js') }}" ></script>
https://github.com/laravel/framework/issues/17634#issuecomment-375473990
Для чего нужен этот defer?
defer означает, что скрипт будет загружен только тогда, когда будет загружено все остальное.
Я использую mix.copy вместо mix.js для jQuery, и он отлично работает!
пример:
mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
Затем добавьте <script src = "{{ asset('vendor/jquery/jquery.min.js') }}"></script> перед </body>
какой файл main.js? здесь:
resources/assets/scripts/index.js?