пряжа: $ не определено - PullRequest
Новая
       1

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

0 голосов
/ 08 октября 2018

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

Мне нужно включить библиотеку 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, но DataTables не работают.

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

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

1 Ответ

0 голосов
/ 14 октября 2018

Это не из-за 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 сейчас, работает как charm.

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

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

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

Так что не использует custom <script> теги в вашем html теге <head> для кода вашего приложения, потому что он будет загружен и выполнен раньше, чем любой другой, определенный в нижней части вашего <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, где произошла ошибка.

...