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

Question

[Владимир Матюха]

Всем привет!

Как сделать 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
            }
        })
    )
}

Comments

[Алексей Зуев]

Ну налицо явно косяки с путями. Вы же начали использовать ProvidePlugin. Почему не доделали?

[Владимир Матюха]

Алексей Зуев: Я не повсем понял где мне указывать путь к либе

[Алексей Зуев]

Владимир: можете попробовать проставить так $: path.resolve(__dirname, 'vendor/jquery.js') в ProvidePlugin, если у вас папка vendor в корне. Тогда в js у вас будет доступна переменная $

[Алексей Зуев]

Владимир: можно еще воспользоваться настройкой resolve.modulesDirectories.

Answer 1

[Алексей Алексеев]

Мне хватило подключить 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

Answer 2

[Владимир Матюха]

Алексей Зуев: Спасибо.

Я разобрался по другому, воспользовался script лоадером

require('script!../../vendor/slider/jquery.slider.js');

Answer 3

[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);

Comments

[Михаил Вихрян]

require('./путь_к_файлу_с_плагином') не помог? что за ошибка? jQuery is undefined?

[igortelmenko]

require('./путь_к_файлу_с_плагином') не подключает плагин глобально. Вызовы будут возможны только внутри того же файла, что содержит require-вызов.

Пробовал

require('bootstrap-daterangepicker')

И ошибка при обращении

$(...).daterangepicker is not a function

[igortelmenko]

Я нагуглил вот какой способ https://www.npmjs.com/package/fancybox
Но к сожалению он у меня не совсем работает. Плагин регистрируетя как-то не так.

Возможно потому, что у меня в проекте сам jquery не так как надо подключен.

Скелет проекта делал не я. Теперь надо переделывать.

[a1en_yeah]

моя проблема была решена оч просто =) файл то на самом деле отлично подключался и через импорт, и доступен в компоненте =)
main.js
import './assets/js/agency.js';
нужно было просто в файле плагина, обернуть код в :

$(document).ready(function(){
...
})

[igortelmenko]

Я чую, что это не совсем верное решение

[Матвей Румынин]

а я вот так и не разобрался... не работают плагины.
голову сломал, вроде все подключаю как надо, в скомпиленом он есть, но увы, is not a function

Answer 4

[litvinenkow]

так всё-таки как подключать правильно в глобальную область видимости скрипты через вебпак?
пока интересует версия 1, но было бы неплохо и с версией 2 разобраться
на stackoverflow пишут, да и не только там, что даже jquery, не говоря уж о модульных библиотеках, через webpack.ProvidePlugin теперь не подключается, что и у меня не получилось, через script лоадер строго не рекомендуют этого делать в документации
как же быть?

Comments

[Михаил Вихрян]

Сам борюсь с этим. Официальная документация пишет так: https://webpack.js.org/plugins/provide-plugin/

[Quber]

тоже эта проблема

Answer 5

[Михаил Вихрян]

Webpack 2: https://webpack.js.org/plugins/provide-plugin/
Ставим jquery через npm и радуемся

Comments

[a1en_yeah]

а плагины на jquery как же подключать ?

Answer 6

[Platon Muravitsky]

В new webpack.ProvidePlugin добавьте

'window.$': 'jquery',

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