«Uncaught ReferenceError: $ не определено», но включен jQuery - PullRequest
Новая
       27

«Uncaught ReferenceError: $ не определено», но включен jQuery

1 голос
/ 06 апреля 2019

У меня ошибка при открытии веб-страницы с кодом jQuery.

Uncaught ReferenceError: $ не определено

Я включил jQuery & Bootstrap в приложение.js и я не могу использовать jQuery в представлении.

В app.js 

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

import 'bootstrap';

В макете: 

<script type="text/javascript" src="{{ asset(mix('js/manifest.js')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('js/vendor.js')) }}"></script>
<script type="text/javascript" src="{{ asset(mix('js/app.js')) }}"></script>
@stack('scripts')

В представлении: 

@push('scripts')
    <script type="text/javascript">
        $(function () {
            alert('ok');
            mediumZoom('.embedded_image img');
        });
    </script>
@endpush

My webpack.mix.js : 

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

if (process.env.NODE_ENV === 'production') {
    mix.disableNotifications();
}

/*
 |--------------------------------------------------------------------------
 | 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
    .options({
        uglify: {
            uglifyOptions: {
                compress: {
                    drop_console: true,
                }
            }
        }
    })
    .setPublicPath('public')
    .setResourceRoot('../')
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'window.$', 'jquery', 'window.jquery'],
        tether: ['window.Tether', 'Tether'],
        vue: ['window.Vue', 'Vue'],
        lodash: ['lodash', '_']
    })
    .js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css')
    .copyDirectory('resources/assets/images', 'public/images')
    .extract([
        'highlight.js',
        'lodash',
        'popper.js',
        'jquery',
        'bootstrap',
        'axios',
        'vue'
    ])
    .sourceMaps()
    .version();

Я не хочу использовать TypeScript.

...