Frontier
@Frontier
Front-end разработчик

Как подружить Webpack + jQuery + jQuery plugins?

Всем привет!

Как сделать jquery доступным в глобальной области видимости для плагинов и как собственно эти плагины подключать/вызывать в модулях не напортачив в путях?
jQuery хотелось бы подключать как модуль, а не тегом.

При сборке того что есть выдаёт:
ERROR in ./blocks/slider/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./vendor/jquery.js in D:\DEV\webpackbuilder\frontend\blocks\slider
@ ./blocks/slider/index.js 1:0-29

Есть структура и код:

index.js:
require('./blocks/slider');
blocks
> slider
>> index.js:
require('../../vendors/jquery.js');       
require('../../vendors/jquery.slider.js');

vendors
> jquery.js
> jquery.slider.js

конфиг:
var NODE_ENV = process.env.NODE_ENV || 'dev',
    webpack = require('webpack'),
    path = require('path');

module.exports = {
    context: path.resolve(__dirname, "frontend"),
    entry: {
        index: "./index.js",
        about: "./about.js",
    },
    output: {
        publicPath: "./public/built/",
        path: "./public/built/",
        filename: "[name].js"
    },
    watch: NODE_ENV == 'dev',
    devtool: NODE_ENV == 'dev'? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.EnvironmentPlugin('NODE_ENV'),
        new webpack.NoErrorsPlugin(),
        new webpack.ProvidePlugin({
            $: "./vendor/jquery.js"
            /*,
            jQuery: "jquery",
            "window.jQuery": "jquery"*/
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/, 
                loader: "style!css" 
            },
            { 
                test: /\.styl$/, 
                loader: 'style!css!stylus' 
            },
            {
                test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
                loader: 'file-loader?name=[name].[ext]'
            }
        ],
    },
    stylus: {
        use: [require('kouto-swiss')()],
        import: ['~kouto-swiss/index.styl', __dirname + '/frontend/commons/vars.styl', __dirname + '/frontend/commons/mixins.styl']
    }

};

if (NODE_ENV == 'prod') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    )
}
  • Вопрос задан
  • 47781 просмотр
Пригласить эксперта
Ответы на вопрос 6
Мне хватило подключить jQuery в plugin

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery/dist/jquery.min.js",
    jQuery: "jquery/dist/jquery.min.js",
    "window.jQuery": "jquery/dist/jquery.min.js"
  })
];

(взял за основу рецепт отсюда)
После чего в глобальной области видимости все три варианта вызова jquery будут работать, больше ничего подключать не надо.

Сам jQuery я скачивал через bower, поэтому дополнительно подключил пути, где будут искаться модули
resolve: {
        root: ['./bower_components']
    }

в вашем случае, предполагаю 'bower_components' можно заменить на 'vendor' (путь будет от корня проекта).

require('../../vendors/jquery.js') внутри blocks\slider\index.js уже не нужен будет, достаточно будет просто подключить файл jquery.slider.js
Ответ написан
Комментировать
Frontier
@Frontier Автор вопроса
Front-end разработчик
Алексей Зуев: Спасибо.

Я разобрался по другому, воспользовался script лоадером
require('script!../../vendor/slider/jquery.slider.js');
Ответ написан
Комментировать
@a1en_yeah
jQuery я всё же смог подключить,
уже так всё смешалось что уже точно и не помню, но вроде
сначала установил
npm install jquery --save-dev

потом в главном файле - точке входа:
import $ from 'jquery';

и затем в webpack.config.js
$: 'jquery',
    '$': 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jquery': 'jquery',
    'window.jQuery': 'jquery',


Но как подключить плагины для jQuery ну никак не пойму ! уже неделю бьюсь!
Есть такой плагин
(function($) {
    "use strict"; // Start of use strict

    // jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

    // Offset for Main Navigation
    $('#mainNav').affix({
        offset: {
            top: 100
        }
    })

})(jQuery);
Ответ написан
@litvinenkow
так всё-таки как подключать правильно в глобальную область видимости скрипты через вебпак?
пока интересует версия 1, но было бы неплохо и с версией 2 разобраться
на stackoverflow пишут, да и не только там, что даже jquery, не говоря уж о модульных библиотеках, через webpack.ProvidePlugin теперь не подключается, что и у меня не получилось, через script лоадер строго не рекомендуют этого делать в документации
как же быть?
Ответ написан
Webpack 2: https://webpack.js.org/plugins/provide-plugin/
Ставим jquery через npm и радуемся
Ответ написан
@347platon
В new webpack.ProvidePlugin добавьте

'window.$': 'jquery',

Вы прописали window.jquery
А все обращения делаете через window.$
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы