쿠...sal: [컴][nodejs] webpack 에서 jquery plugin 사용하기

webpack 에서 jquery plugin 사용하기

webpack 을 사용하면서 기존의 source 들을 webpack 으로 변환하고 있는데, jquery extension 들이 문제이다.

아래 글에서 여러가지 방법을 알려준다. 참고하자.

http://stackoverflow.com/a/28989476 : jquery plugin 을 webpack 에서 사용하는 방법
jQuery, plugins and webpack

imports-loader

사용하다 보니 이녀석을 사용하는게 편한 듯 하다. imports-loader 를 설치하고, source 안에 아래처럼 code 를 넣어주면 된다.

imports 는 imports-loader 를 이야기 하는 것이고, ? 이후의 값들은 query string 이라 하는데, parameter 라고 생각하면 된다. (참고: using loaders)

npm install imports-loader --dev-save
.js source 안에 import 로

import 'imports?jQuery=jquery!jquery-toast-plugin' 를 넣어준다.
jquery-toast-plugin module 에 jQuery 라는 variable 을 넘겨주겠단 이야기다.
webpack/imports-loader : 사용법 및 syntax 확인

import $ from 'jquery'
import 'imports?jQuery=jquery!owlcarousel-umd-webpack'

class OwlCarousel{
    constructor(props) {
        ....
        this._initCarousel();
    }


    _initCarousel() {
        var that;
        that = this;
        
        return $("#" + this.sliderId).find('.owl-carousel').owlCarousel({
            autoPlay: true,
            autoplayTimeout: 500,
            
            slideSpeed: 500,
            paginationSpeed: 500,
            singleItem: true,
            navigation: true,
            transitionStyle: "fadeUp",
            navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
            afterInit: function(elem) {
                return that._progressBar(elem);
            },
            afterMove: function() {
                return that._moved();
            },
            startDragging: function() {
                return that._pauseOnDragging();
            }
        });
    };
}

window.$

간단히 해결하는 방법(?)은 그냥 예전처럼 jquery 와 jquery plugin 만 따로 <script tag> 를 사용하면 된다. 이 경우에 import $ from 'jquery' 와 값이 겹쳐서 동작이 안할 수 있으므로 window.$ 를 사용하면 된다.

참고로, chrome dev tools 의 console 에서 window.$ 를 기본적으로 제공하는데, 여기서 말하는 것은 이녀석이 아니고, window.$ 를 assign 한 window.$ 를 이야기 한다.

Command Line API - FirebugWiki

package.json | module

간혹 module 의 package.json 설정이 이상해서 import 가 안되는 경우가 있다. 아래 경우를 참고하자.

참고 :쿠...sal: [컴][nodejs] import 가 안되는 npm package 의 경우

Datatables

쿠...sal: [컴] webpack 에서 DataTable jquery plugin 사용하기

개인적인 생각

개인적으로 jquery plugin 을 되도록 안쓰는게 최선인 듯 하다. 기본적으로 global variable 을 전제로 확장시킨 경우가 많고, module export 에 대한 고려를 못한 녀석들이 많다. 이런 설정 때문에 고생하는 것보다, 차라리 다른 module 을 찾아서 사용하는 것이 나아 보인다. 물론 어쩔 수 없다면 사용해야 겠지만 ... ^^;;;

쿠...sal

[컴][nodejs] webpack 에서 jquery plugin 사용하기