은 aurelia 앱에서 부트 스트랩과 jquery를 요구합니다.

Question

Aurelia를 처음 사용했기 때문에 이것이 어떻게 작동하는지 잘 모르겠습니다. 나는 새로운 Aurelia 프로젝트를 만들었고 간단히 jspm install bootstrap을 수행하여 bootstrap을 설치했습니다. 나는 이것도 콘솔 jquery 3.0.0에 뽑아 보았다.

내 질문에, 내 프로젝트에 bootstrap.css, bootstrap.js 및를 어떻게 사용합니까?

첫 번째 시도 : app.html에서

나는 다음 thhe을하려고 노력 :

<require from="bootstrap"></require> 

내가 노력하는 내 config.js에 다음 줄이 있기 때문에 :의

map: { 
    ... 
    "bootstrap": "github:twbs/bootstrap@3.3.6", 
    ... 
} 

이 종류의 그것이 bootstrap.js을로드한다는 의미에서 작동하지만 브라우저에서 누락 된 오류가 발생합니다. jquery.js. 그래서 자동으로 jquery를로드하지 않습니다. 정상입니까?

두 번째 시도 :

나는 app.html이 내 require 변경 :

<require from="jquery/dist/jquery.js"></require> 
<require from="bootstrap/css/bootstrap.css"></require> 
<require from="bootstrap/js/bootstrap.js"></require> 

그들이 이후, 그것은 어디 bootstrap.js 및 bootstrap.css 파일을 찾을 줄 아는 방법을 잘 모르겠어요 jspm_packages/github/twbs/bootstrap@3.3.6/css/bootstrap.css 등. 그러나 부트 스트랩 파일을 찾는 방법을 알고 있습니다. 그러나 이 아닌 jquery 파일.

나는 JQuery와 내 config.js이 있습니다

map: { 
    ... 
    "github:twbs/bootstrap@3.3.6": { 
     "jquery": "npm:jquery@3.0.0" 
    }, 
    .... 
} 

그래서 기본적으로 내 질문은, 어떻게해야이 일을? <require from="bootstrap"> 일 때 require은 필요한 모든 파일을 자동로드해야합니다. 아니면 개별 파일로로드해야합니까? 그렇다면이 경우 jquery를 어떻게로드합니까?

Answer 1

요소는 Aurelia 구성 요소, html 템플릿 (Aurelia 구성 요소) 또는 css 파일을 가져 오는 데 사용됩니다. 자바 스크립트 파일을로드하는 것이 아닙니다.

아우렐 리아 골격은 main.js 파일에 부트 스트랩을로드하는 방법을 보여줍니다

import 'bootstrap'; 

이 파일의 첫 번째 라인이다. 그러면 부트 스트랩의 자바 스크립트 코드가 초기화됩니다.파일에 jQuery를 가져 오기

<require from="bootstrap/css/bootstrap.css"></require> 

뿐만 아니라 매우 간단하다 :

import $ from 'jquery'; 

그런 다음 당신은 그러나 $ 기능을 사용할 수 있습니다

는 app.html에서 require 요소는 부트 스트랩의 CSS를로드하는 데 사용됩니다 당신이 좋아.

Answer 2

나는이 문제는 다음 아우렐 리아 사이트의 튜토리얼 페이지에서 다음 최신 노드와 NPM 등을 설치했다 : -

는 부트 스트랩 설정을 얻으려면, 우리는 NPM과 라이브러리 자체를 설치하여 시작합니다. 실행 명령 행에 다음은이 작업을 수행합니다 : 패키지 말하자면

npm install jquery@^2.2.4 --save 

다음 응용 프로그램을 다시 시작 : 부트 스트랩이 jQuery를 사용하기 때문에

npm install bootstrap --save 

다음, 우리는 다음과 같이뿐만 아니라 jQuery를 설치하려면 업데이트하고 다시 실행 ... 고정!

Answer 3

추가 후 가져 오기 'bootstrap'; main.js의 을 실행하려면 앱을 중지하고 (Ctrl + c) au run - watch 으로 다시 실행해야 작동 할 수 있습니다.