“未捕获的ReferenceError:$未定义”,但包含jQuery

时间:2019-04-06 08:48:08

标签: javascript jquery laravel laravel-blade laravel-5.8

使用jQuery代码打开网页时出现错误。

  

未捕获的ReferenceError:未定义$

我在app.js中包含了jQuery和Bootstrap,但是我无法在视图中使用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

我的 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。

0 个答案:

没有答案