2014-10-04 3 views
2

내 소스 browserifycoffeeify 파일 :browserify

browserify source.coffee -t coffeeify > main.js --debug 

내 package.json : 나는 명령을 main.js로 변환

$ = jQuery = require 'jquery' 
require 'jq-ui' 
$ -> 
    jqueryUiIsLoaded = jQuery.ui 
    console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}" 

{ 
    "name": "jquery_ui_test", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "main": "browserify source.coffee -t coffeeify > main.js --debug" 
    }, 
    "browser": { 
    "jquery": "./node_modules/jquery/dist/jquery.min.js", 
    "jq-ui": "./node_modules/jquery-ui/jquery-ui.js" 
    }, 
    "browserify-shim": { 
    "jquery": "$", 
    "jq-ui": { 
     "exports": "jq-ui", 
     "depends": [ 
     "jquery:jQuery" 
     ] 
    } 
    }, 
    "dependencies": { 
    "coffee-script": "*" 
    }, 
    "devDependencies": { 
    "browserify": "^6.0.2", 
    "coffeeify": "^0.7.0", 
    "jquery": "^2.1.1", 
    "jquery-ui": "^1.10.5" 
    } 
} 

내 html :

브라우저에서
<html> 
<head> 
    <script src='./main.js'/> 
</head> 
</html> 

나는 JQuery와 UI가로드되지 않은 것을 볼 콘솔 :

jquery-ui is loaded: undefined source.coffee:5 

내가 browserifyjquery-ui 부하를 만들기 위해 어떻게해야합니까?

+0

Bower를 사용하지 않고도이 기능을 사용할 수 있습니까? –

답변

2

이 솔루션은 debowerify을 사용하여이었다 나는 bower를 통해 jqueryjquery-ui를 설치했습니다. 내 package.json은 다음과 같습니다

{ 
    "name": "jquery_ui_test", 
    "version": "0.0.1", 
    "private": true, 
    "scripts": { 
    "main": "browserify source.coffee -t coffeeify -t debowerify > main.js --debug" 
    }, 
    "dependencies": { 
    "coffee-script": "*" 
    }, 
    "devDependencies": { 
    "browserify": "<6", 
    "coffeeify": "^0.7.0", 
    "debowerify": "^0.8.2" 
    } 
} 

source.coffee입니다 :

$ = window.jQuery = require("jquery") 
require "jquery-ui" 
jqueryUiIsLoaded = jQuery.ui 
console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}" 

그리고 브라우저 콘솔 출력은 다음과 같습니다

jquery-ui is loaded: [object Object]

그래서 jquery-ui이 작동

.

+0

그럼 전체 라이브러리를로드하지 않고 자동 완성만을 어떻게로드합니까? –

+0

전체 jquery없이 자동 완성을로드 할 수 있다고 생각하지 않습니까? –

+0

일반적으로 포함시킬 내용을 골라서 선택할 수 있습니다. http://jqueryui.com/download/ –