jquery ui와 bower의 사용 방법은 무엇입니까?

Question

yeoman 및 bower으로 실험 중입니다.

나는

yo webapp 

나는 그래서 그것을 이물 사용하여 설치 한 jqueryui를 사용하려면 다음 명령을 사용하여 유사시 웹 애플리케이션을 만들었습니다

bower install jquery-ui --save 

이 잘 작동을하지만, jQuery를 UI 구성 요소 구성 요소 "모두"가있는 javascript 파일을 포함하지 않고 각 구성 요소마다 하나씩 많은 javascript 파일을 포함합니다.

필요한 자바 스크립트 파일 만 포함시켜야합니까? 아니면 jQuery UI를 사용하기 전에 다른 작업을해야합니까?

팁 주셔서 감사합니다!

Answer 1

모든 것을 필요로하거나 단지 실험용이라면 필자는 필요한 파일을 포함 시키거나 폴더에 기본 사용자 지정 빌드 (모든 구성 요소가 있다고 생각됩니다)를 사용합니다. 이 시간 심정에서

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script> 

전체 REPO를 아래로 끌어 이후 (자신의 웹 사이트에서) 다른 것을 연결 또는 모듈의 로딩이 톱니/requirejs 같은 다른 도구에 의해 처리됩니다처럼 필요 "이물은 패키지 관리자입니다."

참고 :

이물에 대한 홈페이지에 이물과 함께 사용하여 패키지 http://bower.io/

Dissusion 및 jquery과 함께 당기 전체의 repos https://github.com/bower/bower/issues/45

Answer 2

bower.json (또는 component.json)의 dependencies에 추가 jquery-ui.

bower install 

그런 다음, main.js에서 jqueryui에 경로를 추가하고 필요 :

{ 
    …, 
    "dependencies": { 
    "jquery": "~1.9.1", 
    "jquery-ui": "~1.10.3", 
    ... 
    }, 
    … 
} 

을 설치

require.config({ 
    paths: { 
    jquery: '../components/jquery/jquery', 
    jqueryui: '../components/jquery-ui/ui/jquery-ui', 
    … 
    }, 
    shim: { 
    jqueryui: 'jquery', 
    … 
    }, 
    … 
}); 
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) { 
    'use strict'; 
    ... 
}); 

그것은 나를 위해 작동합니다.

, 즉 jquery.ui.sortable이 프로젝트에 필요한 경우,로드 deps 아래에 나열된 모듈을 실행해야 우리는 지정된

requirejs.config({ 
    shim: { 
     'jquery.ui.sortable': { 
      deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'], 
      exports: '$' 
     } 
    } 
}); 

:

Answer 3

당신은 당신의 목표를 달성하기 위해 requirejs.config의 심 속성을 사용할 수 있습니다 먼저, 실행되기 전에.

불행하게도,이 여전히 경쟁 조건을 생산 ...하지만 그 사람이 가야 얼마나 일반적으로이 (: 최신의 jQuery UI 심정 구성 요소에서

Answer 4

우리는 (V를 말하는 1.10..3) 당신은 다음을 수행 할 수

<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">

대부분의 구성 요소와 실행 jQueryUI의 위젯을 얻으려면, 다음을 포함한다 : CSS 테마에 대한

1. 을, 다음 링크를 포함 스크립트

   <script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

Answer 5

참고로 bower install jquery-ui --save은 jquery-ui.js 종속성을 프로젝트에 추가하지만 스타일은 추가하지 않습니다. 이를 위해 나는

{ 
    ..., 
    "dependencies": { 
    ..., 
    "jquery-ui": "^1.11.4" // already added with --save from bower install command 
    }, 
    ..., 
    "overrides": { 
    "jquery-ui": { 
     "main": [ 
     "themes/smoothness/jquery-ui.css", 
     "jquery-ui.js" 
     ] 
    } 
    } 
} 

아래 참조 같이 bower.json 파일 overrides 섹션을 추가 할 필요가 :

https://stackoverflow.com/a/27419553/4126114

https://github.com/taptapship/wiredep/issues/86