使用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。