EmberJS-종속성 관리

Ember는 NPM 용 package.json 및 Bower 용 bower.json 에 정의 된 종속성을 관리하기 위해 NPM 및 Bower를 사용합니다 . 예를 들어, Ember 앱을 개발하는 동안 Ember가 설치하지 않은 스타일 시트에 대해 SASS를 설치해야 할 수 있습니다. 이를 수행하려면 재사용 가능한 라이브러리를 공유 하기 위해 Ember 애드온 을 사용하십시오 . CSS 프레임 워크 또는 JavaScript datepicker 종속성을 설치하려면 Bower 패키지 관리자를 사용하십시오.

애드온

엠버 CLI는 다음 명령을 사용하여 엠버 부가 기능을 설치하는 데 사용할 수 있습니다 -

ember install ember-cli-sass

타다 남은 명령은 설치 각각의 구성 파일에 대한 모든 종속성을 저장합니다.

나무 그늘

HTML, CSS, JavaScript 또는 이미지 파일의 구성 요소를 관리하는 웹용 패키지 관리자입니다. 기본적으로 모든 패키지를 유지 및 모니터링하고 새 업데이트를 검사합니다. Ember CLI 프로젝트의 루트에 배치 된 애플리케이션을 추적하기 위해 구성 파일 bower.json 을 사용합니다 .

다음 명령을 사용하여 프로젝트 종속성을 설치할 수 있습니다-

bower install <dependencies> --save

자산

Addon 또는 Bower 패키지로 사용할 수없는 프로젝트 의 vendor / 폴더에 타사 JavaScript를 배치하고 프로젝트의 public / 폴더에 robots.txt, favicon 등과 같은 자체 자산을 배치 할 수 있습니다 . Ember 앱을 개발하는 동안 Ember가 설치하지 않은 종속성은 매니페스트 파일 ember-cli-build.js 를 사용하여 포함해야합니다 .

AMD JavaScript 모듈

자산 경로를 첫 번째 인수로 제공하고 모듈 및 내보내기 목록을 두 번째 인수로 제공 할 수 있습니다. 이러한 자산을 ember-cli-build.js 매니페스트 파일에 다음과 같이 포함 할 수 있습니다.

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

환경 특정 자산

객체를 환경 이름 인 첫 번째 매개 변수로 정의하여 서로 다른 자산을 서로 다른 환경에서 사용할 수 있으며 객체의 값은 해당 환경에서 자산으로 사용해야합니다. 에서 엠버-CLI가-build.js 매니페스트 파일을, 당신은 포함 할 수 있습니다 -

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

기타 자산

모든 자산이 public / 폴더에 배치되면 dist / 디렉토리에 복사됩니다. 예를 들어 public / images / favicon.ico 폴더에 있는 favicon을 복사하면 dist / images / favicon.ico 디렉토리에 복사됩니다 . 타사 자산은 vendor / 폴더 에 수동으로 추가 하거나 import () 옵션을 통해 Bower 패키지 관리자를 사용하여 추가 할 수 있습니다 . import () 옵션 을 사용하여 추가되지 않은 자산 은 최종 빌드에 표시되지 않습니다.

예를 들어 자산을 dist / 폴더 로 가져 오는 다음 코드 줄을 고려하십시오 .

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

위의 코드 줄은 dist / font-awesome / fonts / fontawesomewebfont.ttf에 글꼴 파일을 생성합니다 . 위의 파일을 아래와 같이 다른 경로에 배치 할 수도 있습니다.

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

dist / assets / fontawesome-webfont.ttf 의 글꼴 파일을 복사합니다 .