질문을 삭제하지 말아주세요.!
 
1
0
-1

안녕하세요.

되게 멍청한 질문 하나 해보겠습니다...

저는 실제로 webpack, gulp 같은 모듈 번들러를 사용하면서도 별로 궁금해하지 않았습니다.

라라벨 설치시 기본적으로 셋팅된 app.js를 보면 require('.bootstrap');을 하고 있죠...

부트스트랩 파일에서는 jquery를 불러오고 있구요...

저는 지금 jquery 라이브러리 중 하나인 select2를 사용하려고 합니다.

뷰 파일에서 <script> 태그로 select2 파일을 가져오면 정상작동하지만...

굳이, require('./select2');를 하려고 합니다.

뭐 일단 이렇게 하면 정상적으로 파일을 가져오긴 하는데...

$(선택자).select(); → $(...).select2 is not a function 에러네요.


$.fn.select2 = require('.select2');를 해보기도 하고...

별 짓을 다 하고 있습니다.

그 전에도 jquery mask plugin을 사용하려다가도 같은 문제로.. 그냥 jquery inputmask plugin을 사용했네요...

(jquery inputmask plugin 경우엔 require(...);로 바로 작동했습니다.)


간단한 설명과 해결 방안을 알려주실 훌륭하신분 계십니까?



감사합니다.

    CommentAdd your comment...

    1 answer

    1.  
      3
      2
      1

      해당 내용에 대해 이해하실려면 자바스크립트 모듈화에 대한 내용이 필요합니다.

      자바스크립트의 모듈을 정의하기 위한 포맷으로 크게 아래와 같이 있습니다.

      • AMD (Asynchronous Module Definition)
      • CommonJS
      • UMD (Universal Module Definition)
      • ES6 Module

      이중에서 nodejs에서의 require('') 같은 모듈 불러오는 방식을 Commonjs 라고하는데,

      select2 라이브러리에서 CommonJS에 대한 지원이 일시적으로 문제되어 배포된걸로 확인됩니다.


      AMD는 브라우저에서의 모듈 정의를 위한 포맷으로 대표적으로 Require.js라는 라이브러리를 이용해서 브라우저에서 모듈화 하여 관리하던 방식입니다.


      이렇게 2가지로 나뉘어던 방식을 두개다 지원이 가능하도록 나온 포멧이 UMD입니다.

      최근은 대부분의 라이브러리들이 node.js에서와 브라우저에서의 지원을 위해 UMD 포맷을 준수하는 편입니다.


      https://github.com/select2/select2/releases/tag/4.0.4

      위의 jquery select2 라이브러리 github 릴리즈 내역을 보시면 UMD 지원을 위해 수정된걸로 보아

      아마 최신버전의 select2 라이브러리로 사용하시면 문제 없을 듯 합니다.


      1. 김영우

        답변 감사합니다. 오늘은 제가 저거땜 진짜 암걸릴 것 같아서 잠깐 쉬는 중인데, 권윤학님께서 답변해주신 것들을 참고해서, 내일 다시 빠이팅해보겠습니다.

        그리고 답변 달아주시기 전, 몇 분전에 해당 내용들을 대충 찾아봤거든요. 근데 보면서 또 의문이 생겨서요.

        혹시 가능하시다면... && 귀찮으시지 않다면... && 피곤하시지 않다면... 급하지 않으니... 조금은 자세히..

        webpack 이 글에 대해 답변해주실 수 있을까요? 부담 갖지 않고 못본척 그냥 넘어가셔도 좋습니다.


        우선 답변 매우 감사합니다.

      2. 김영우

        > 제가 select2 플러그인 버전 4.0.5를 갖고 시도했었네요. 근데 작동이 안되요. require('경로/파일명'); 요래 했거근요(물론 그 전에 jquery는 로드했습니당.). 음... 아마 제가 뭔가 사용법을 잘 모르고있는 것 같은데 오늘도 다시 한번 빠이팅 넘치게 찾아봐야겠습니다!!!!

      3. 김영우

        원인을 알았습니다..


        app.js 파일 내

        window.jQuery = window.$ = require('jquery');


        member.js 파일 내

        require('../plugin/select2');


        이렇게 되어있습니다.


        member.js 파일 내

        window.jQuery = window.$ = require('jquery');를 해주면 해결이 되지만...


        member.blade.php 뷰 파일 내

        <script src="/js/app.js"></script>

        <script src="/js/member.js"></script>

        따로 물려주거든요.

        app.js 파일에서 이미 jquery를 부르고 있는데, member.js에서 또 불러주는 것은 아닌 것 같은데, app.js 파일 내 jquery 로드한 것을 글로벌하게 변경하거나, member.js 파일 내에서 app.js에서 로드한 jquery를 부르는 방법이 없을까요?

      4. 김영우

        jquery 의존성을 지닌 jquery inputmask 플러그인 경우엔 코드 내 ... exports = jQuery ...(?)를 하여 jquery를 호출하여 쓰는 것 같구요. select2 같은 경우엔 export가 아닌 define을 했는데요. 웹팩으로 컴파일시 다른 파일에 있는 jquery 코드들을 죄다 가져오네요. 그런데도 나뉜 모듈을 불러오지 못해서 ... require('jquery')를 해줘야지 export 하는 것 같습니다(?)


        자세힌 모르겠지만 뭔가 잘못된 냄시가 나네요.. 제가 잘못이해했거나요... ㅠㅠ

      5. 권윤학

        제가 mix를 써보질 않아서 조금 찾아봤는데

        (이런 경우 Webpack에서 ProvidePlugin 을 이용해서 해결하는데.. Mix에서 webpackConfig로 해당 플러그인 설정해도 먹히지 않아서...)

        mix.autoload 라는 API가 있습니다. 해당 메서드를 이용하시면 해결이 가능합니다.

        mix.autoload({
            'jquery': ['$', 'window.jQuery', 'jQuery', 'window.$']
        });

        이런식으로 처리해두시면 select2 라이브러리 로드시 jquery를 require or import 하실 필요 없으십니다.

      6. 김영우

        아! 감사합니다!!! 주변에 이런거 알고계신분이 없어서 여쭤볼 곳이 없어서 항상 고생이었는데, 많이 배워갑니다!!!!!!!!!!!!!!! 감사합니다!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 

      CommentAdd your comment...