Не работают плагины jquery при подключении через webpack. Как правильно настроить?

186
16 сентября 2018, 14:40

Пытаюсь настроить окружение для работы с webpack. Модули npm загружены, там есть jquery и первый плагин - YTPlayer. В точку сборки подключил jquery, в коде он доступен, работает. Когда подключаю туда плагин - пишет ...YTPlayer is not a function... в скомпиленом файле он есть! Но почему-то недоступен... Перерыл уже все мануалы, перепробовал все варианты, ничего не пойму. Вот конфиг webpack.config.js:

const path = require('path'); 
 
// webpack.config.js 
const webpack = require('webpack') 
 
module.exports = { 
    plugins: [ 
        new webpack.ProvidePlugin({ 
            $: 'jquery', 
            '$': 'jquery', 
            jquery: 'jquery', 
            jQuery: 'jquery', 
            'window.jquery': 'jquery', 
            'window.jQuery': 'jquery', 
            'window.$': 'jquery' 
        }) 
    ], 
    entry: ['./code/template.js', './scss/template.scss'], 
    output: { 
        path: path.resolve(__dirname, 'assets'), 
        filename: 'template.js' 
    }, 
    resolve: { 
        root: ['./node_modules'] 
    }, 
    module: { 
        rules: [ 
            { 
                test: /\.(scss)$/, 
                use: [ 
                    { 
                        loader: 'file-loader', 
                        options: { 
                            name: '[name].css', 
                            outputPath: '' 
                        } 
                    }, 
                    //{ 
                        // Adds CSS to the DOM by injecting a `<style>` tag 
                        // This loader using when disable file-loader, to include css into bundle.js 
                        //loader: 'style-loader' 
                    //}, 
                    //{ 
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them 
                        // This loader using when disable file-loader, to include css into bundle.js 
                        //loader: 'css-loader' 
                    //}, 
                    { 
                        // Loader for webpack to process CSS with PostCSS 
                        loader: 'postcss-loader', 
                        options: { 
                            plugins: function () { 
                                return [ 
                                    require('autoprefixer') 
                                ]; 
                            } 
                        } 
                    }, 
                    { 
                        // Loads a SASS/SCSS file and compiles it to CSS 
                        loader: 'sass-loader' 
                    } 
                ] 
            } 
        ] 
    }, 
    watch: true, 
    devtool: "source-map", 
    // This remove jquery code from bundle to use external CDN 
    externals: { 
        //jquery: 'jQuery' 
    } 
};

Вот код точки сборки template.js:

import 'bootstrap'; 
import $ from 'jquery'; 
import 'jquery.mb.ytplayer'; 
import './web'

он подключает файл web.js, в котором я вызываю плагин, и он нифига не работает!!!

import $ from "jquery"; 
import 'jquery.mb.ytplayer'; 
 
$(document).ready(function () { 
 
    $("button.offcanvas").click(function (e) { 
        $("body").toggleClass("hide"); 
        e.preventDefault(); 
        return false; 
    }); 
 
    $(".offside").click(function (e) { 
        $("body").toggleClass("hide"); 
        //e.preventDefault(); 
        //return false; 
    }); 
 
    $("#bgndVideo").YTPlayer(); 
 
});

Хотя компилируется, и код там присутствует. Собирает jquery, YTPlayer и web.js

Answer 1

В template.js:

let $ = require('jquery');
window.$ = window.jQuery = $;
import 'bootstrap';
import 'jquery.mb.ytplayer';
import './web'

в скриптах уже импортировать $ не надо, поскольку jQuery использует глобальную переменную

READ ALSO
Вывод значений Jinja2

Вывод значений Jinja2

Хочу вывести на страницы данный в таком формате: [{'group_name': <>, 'date': [<>,<>,

202
Ошибка в консоли при запуске gulp

Ошибка в консоли при запуске gulp

При запуске gulp watch появляется ошибка

208
Минимизация AJAX

Минимизация AJAX

Господа, на странице есть много разных форм с отправкой через AJAX

233