jQuery 没有在我的 webpack encore 上定义

Question

在我的 app.js 我有

import $ from 'jquery';
global.$ = global.jQuery = $;
import 'chart.js/dist/Chart.min';
import 'chartjs-plugin-labels/build/chartjs-plugin-labels.min';
import 'bootstrap/js/dist/dropdown';
import '../../vendor/snapappointments/bootstrap-select/dist/js/bootstrap-select.min';
import 'ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min';
import Lightpick from 'lightpick';

这是我的 webpack.confing-js

    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .enableVersioning()
    .addEntry('app', './assets/js/app.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
   .autoProvidejQuery()

错误...无法正常工作。尝试了很多解决方案但都没有

ajax-bootstrap-select.min.js:21 Uncaught ReferenceError: jQuery is not defined
    at Object../node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.min.js (ajax-bootstrap-select.min.js:21)

Answer 1

我遇到了与 Bootstrap 和 JQuery 完全相同的问题。

我把我的解决方案写给你，希望它有用：

/** app.js **/
//.. Here I include the app.scss

//import $ from 'jquery' DOESN'T WORK
const $ = require('jquery');
Window.prototype.$ = $; //HERE IS MY SOLUTION (Without this line it doesn't work!)

//Here I declare bootstrap
require('bootstrap');
//..
// I include some library which need JQuery
require('bootstrap/js/dist/tooltip');
require('bootstrap/js/dist/popover');

import bsCustomFileInput from "bs-custom-file-input";

//Now $ is working!
$(document).ready(function () {
    $('[data-toggle="popover"]').popover();
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });
});

在我的 webpack.config.js 中，我不会取消注释这些行


    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()

jQuery 没有在我的 webpack encore 上定义

jQuery is not defined on my webpack encore

jquery

symfony

webpack-encore