пряжа: $ не определено

Я впервые использую Yarn. Я установил последнюю версию Laravel Boilerplate (http://laravel-boilerplate.com/), и там используется пряжа.

Мне нужно включить библиотеку JS DataTables (https://datatables.net/). К сожалению, я новичок в Yarn и не уверен, что все делаю правильно, потому что получаю сообщение об ошибке:

[Показать/скрыть сведения о сообщении.] ReferenceError: $ не определен

который находится в этой строке:

$(document).ready(function() {
...

Это говорит мне, что он не может найти библиотеку jquery, но она должна быть там.

Вот код webpack.mix.js:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.setPublicPath('public');

mix.sass('resources/sass/frontend/app.scss', 'css/frontend/frontend.css')
    .sass('resources/sass/backend/app.scss', 'css/backend/backend.css')
    .js('resources/js/frontend/app.js', 'js/frontend/frontend.js')
    .js([
        'resources/js/backend/before.js',
        'resources/js/backend/app.js',
        'resources/js/backend/after.js'
    ], 'js/backend/backend.js')
    .extract([
        'jquery',
        'datatables.net-dt',
        'bootstrap',
        'popper.js/dist/umd/popper',
        'axios',
        'sweetalert2',
        'lodash',
        '@fortawesome/fontawesome-svg-core',
        '@fortawesome/free-brands-svg-icons',
        '@fortawesome/free-regular-svg-icons',
        '@fortawesome/free-solid-svg-icons'
    ]);

if (mix.inProduction() || process.env.npm_lifecycle_event !== 'hot') {
    mix.version();
}

Каждый раз, когда я вызываю команду «yarn prod», чтобы создать файлы CSS и js, но таблицы данных не работают.

Я что-то пропустил?

Заранее спасибо!


yarnpkg javascript datatables
person Vince Carter    schedule 07.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это не из-за yarn. Yarn — это менеджер пакетов, он не запускает какую-либо часть кода вашего приложения, поэтому не может генерировать ошибку, подобную вашей. Пряжа предназначена только для загрузки пакетов и управления их зависимостями.

Затем вам приходит Laravel Mix, который является просто оберткой вокруг Webpack. Webpack читает код вашего приложения, обрабатывает ваши команды require и import в ваших файлах .js, а затем генерирует ваши пакеты.

Как заставить это работать:

Я предполагаю, что вы запускали команду yarn (без параметров) в корне вашего проекта один раз, когда устанавливали Laravel Boilerplate. В вашем каталоге node_modules должно быть много пакетов (более 900).

Затем вы также запустили yarn add -D datatables.net-dt. Теперь у вас должны быть папки datatables.net и datatables.net-dt внутри node_modules.

Я вижу, вы добавили datatables.net-dt в webpack.mix.js, все в порядке! Вам не нужны никакие другие require( 'datatables.net-dt' )( window, $ );, как указано в документации. Одной строчки в вашем webpack.mix.js достаточно! DataTable будет внутри вашего vendor.js.

Теперь создайте пример таблицы с атрибутом id="example" в index.blade.php, затем добавьте этот код в конец вашего resources\js\frontend\app.js:

$(document).ready(function() {
    $('#example').DataTable();
});

Затем запустите yarn dev, чтобы позволить Webpack сгенерировать ваши пакеты (скомпилированные js-файлы) и просмотреть ваш сайт в браузере. После этого он должен работать над новой установкой Laravel Boilerplate без каких-либо ошибок. Я только что проверил id сейчас, работает как шарм.

Возможная ошибка:

$ is not defined говорит о том, что некоторая часть вашего кода пытается использовать jQuery до того, как он будет загружен.

Важно, чтобы вы писали свои коды, используя jQuery (сокращенно $) внутри вашего resources\js\frontend\app.js или в отдельном .js, который позже требуется/импортируется в этот файл! Это связано с тем, что jQuery и другие пакеты поставщиков, такие как DataTable, хранятся в vendor.js, который должен быть загружен перед любыми обращениями к ним.

Поэтому не используйте пользовательские теги <script> в теге <head> вашего html для кода вашего приложения, потому что он будет загружен и выполнен раньше любого другого, определенного в нижней части тега <body>!

Посмотрите на этот файл resources\views\frontend\layouts\app.blade.php. В нижней части тега body вы увидите это:

<!-- Scripts -->
@stack('before-scripts')
{!! script(mix('js/manifest.js')) !!}
{!! script(mix('js/vendor.js')) !!}
{!! script(mix('js/frontend.js')) !!}
@stack('after-scripts')

Ваш resources\js\frontend\app.js и все его импортированные скрипты будут скомпилированы в этот файл js/frontend.js.

Как jQuery импортируется в Laravel Boilerplate:

По умолчанию это сделано хорошо, вам не нужно с этим заморачиваться. Откройте свой resources\js\bootstrap.js и увидите эти две строки:

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

Затем этот файл будет импортирован frontend/app.js. Так что напишите свой код здесь, и все будет в порядке...

PS. Если это не поможет вам заставить его работать, вам следует отредактировать свой вопрос и предоставить больше информации о ваших источниках. Скриншот, например, сделанный из вашего Chrome DevTools, показывающий строки вашего JavaScript, где произошла ошибка.

person ARS81    schedule 14.10.2018
comment
спасибо @ ARS81 Я не уверен, что послужило причиной получения этой ошибки, я думаю, что все, что я сделал, как вы описали. Важно то, что теперь я проверил все шаг за шагом, и теперь все идеально. Еще раз большое спасибо! - person Vince Carter; 14.10.2018
comment
у меня есть один вопрос. Я также добавил пакет bootstrap-datepicker в свой backend.css, к сожалению, я не вижу стилей. Я включил один datepicker.css сразу после моего кода backend.css, но это ничего не меняет. Как мне включить некоторый пакет js css? Должен ли я смешивать это, если да - как лучше всего? Заранее спасибо ! - person Vince Carter; 15.10.2018
comment
@VinceCarter Вы уверены, что хотите, чтобы это было в вашем интерфейсе бэкэнда / администратора в вашем приложении? В любом случае... Вы не должны использовать дополнительный тег <link> в своем html для включения css этого нового пакета. Вместо того, чтобы открывать файл resources\sass\backend\app.scss и добавлять эту строку в конец @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css'; или в frontend\app.scss (?). Конечно, вы установили его, как yarn add -D bootstrap-datepicker, и bootstrap-datepicker добавили в свой webpack.mix.js, как вы делали это раньше с пакетом datatables.net-dt. Проверено и хорошо работает для меня. - person ARS81; 15.10.2018
comment
@VinceCarter, конечно, вам нужно запустить npm run dev после этого, чтобы повторно сгенерировать ваши скомпилированные файлы js и css ... - person ARS81; 15.10.2018
comment
еще раз спасибо. я импортировал файл datepicker.css в backend/app.scss, и происходит волшебство :) - person Vince Carter; 16.10.2018
comment
У меня есть последний вопрос. В webpack.mix.js есть около 10 включений в часть extract(). Но в моем node_modules более 1000 папок. Почему это ? можно ли как-то удалить ненужные папки? - person Vince Carter; 16.10.2018
comment
Нет. Это необходимые зависимости. Вот как работает npm... Вы используете 10 пакетов, но они зависят от сотен других пакетов с открытым исходным кодом. Так что никогда не удаляйте и не изменяйте ничего внутри node_modules! - person ARS81; 16.10.2018
comment
Я ценю вашу помощь ! - person Vince Carter; 16.10.2018