2016-07-01 6 views
0

NPM과 gulp를 통해 내 프로젝트 안에 jquery + jquery-ui + bootstrap을로드하려고합니다.Gulp + Browserify + Jquery + Bootstrap

내 구성은 이것이다 :

Package.json

"browser": { 
    "jquery": "/node_modules/jquery/dist/jquery.js", 
    "jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js" 
}, 
"browserify-shim": { 
    "jquery": "$", 
    "jquery-ui": { 
     "exports": "jquery-ui", 
     "depends": [ "jquery:jQuery" ] 
    } 
}, 
"browserify": { 
    "transform": [ "browserify-shim" ] 
}, 
"dependencies": { 
    "bootstrap": "^3.3.6", 
    "jquery": "2.1.0", 
    "jquery-ui-browserify": "^1.11.0-pre-seelio", 
} 

gulpfile.js

gulp.task('browserify', function(){ 
    return browserify([ 
     'node_modules/jquery/dist/jquery.js', 
     'node_modules/jquery-ui-browserify/dist/jquery-ui.js', 
     'node_modules/bootstrap/dist/js/bootstrap.js', 
]) 
.bundle() 
.pipe(source('core.js')) 
.pipe(buffer()) 
.pipe(gulp.dest('build/js')); 
}); 

그럼 난 내의 index.php에서 assetic와 core.js를로드 하지만이 오류가 발생합니다 :

Uncaught ReferenceError: jQuery is not defined 

내가 뭘 잘못하고 있니?

감사합니다.

+0

어쩌면'JQuery와 - browserify'이 문제를 해결에 대한 자세한 설명서를 찾을 수 있습니다'NPM JQuery와 - browserify --save'를 설치합니다. 나를 위해 일했다. –

+0

이 두 패키지'jquery'와'jquery-ui-browserify'를 설치할 수도 있습니다. –

답변

2

당신이 무엇을 하려는지는 모르겠지만 인스턴스를 브라우저에 전달해야하는 것은 응용 프로그램의 진입 점이 아니라 종속성입니다. browserify 컴파일하는 것은 자율적으로 당신을 위해 두 가지 일을 할 것입니다 동안

var $ = require('jquery'); 

:

  1. 을 그는 번들 어떤 넣어 것

    그런 다음 응용 프로그램에서 당신은 그 종속성을로드 할 require 기능을 사용할 수 있습니다 필요한 라이브러리.
  2. require 문은 해당 라이브러리의 번들 사본에 대한 참조로 대체하여 해결할 것입니다.

라이브러리가 npm을 통해 설치되는 한 추가 구성이 필요하지 않습니다. 다른 한편으로는 도서관이 틀에 박힌 위치에있는 경우 브라우저에 해결 방법을 알려줘야합니다.

어쨌든 당신이 repo's readme

관련 문제