JavaScript용 Ignite UI 패키지 관리자 및 모듈 로더와 작동하는 방식

JavaScript용 Ignite UI 널리 사용되는 패키지 관리자와 함께 작동하여 프로젝트의 종속성을 관리합니다. 가장 널리 사용되는 패키지 관리자는 다음과 같습니다.

• NPM
• Yarn
• JSPM

1단계 NPM 작업

이전 단원에서는 NPM을 사용하여 JavaScript Angular 구성 요소용 Ignite UI로 작업했습니다. NPM 작동 방식을 보려면 시작 프로젝트를 다운로드하고(여기서 프로젝트의 최종 버전도 찾을 수 있음) 터미널을 열고 아래 나열된 명령을 실행합니다.

npm install

NPM 설치 명령은 package.json 파일을 읽어 종속성을 설치합니다. NPM을 사용하려면 NodeJS가 설치되어 있어야 합니다. 아직 설치하지 않은 경우 NodeJS 웹 사이트에서 설치할 수 있습니다. NPM 설치 명령을 실행하면 프로젝트에 node_modules 폴더가 추가된 것을 확인할 수 있습니다. 이 폴더에는 이 명령을 사용하여 설치된 모든 라이브러리가 포함되어 있습니다.

기존 프로젝트에서 작업하는 경우 프로젝트에 개별 패키지를 설치할 수 있습니다. JavaScript Angular 구성 요소 패키지용 Ignite UI 개별적으로 설치하려면 다음 명령을 실행합니다.

npm install igniteui-angular2

애플리케이션을 실행하려면 아래 명령을 실행하십시오.

npm start

2단계 원사 작업

NPM은 가장 널리 사용되는 패키지 관리자 중 하나이지만 몇 가지 단점이 있습니다.

• 중첩된 종속성으로 인해 Windows에서 파일 경로가 길어집니다.
• NPM은 순차 설치만 수행하므로 다음 패키지 설치를 시작하기 전에 하나의 패키지를 완전히 설치해야 합니다.
• NPMSJS 패키지에서만 설치할 수 있으며 오프라인 설치는 없습니다.

Yarn은 이러한 문제를 해결합니다. Yarn은 npmjs 또는 bower 레지스트리에서 패키지를 가져오는 빠르고 안정적이며 안전한 패키지 관리자입니다.

GitHub 페이지에서 Yarn에 대해 자세히 알아볼 수 있습니다.

NPM과 마찬가지로 Yarn은 프로젝트의 package.json 파일을 읽어 종속성을 설치합니다.

Yarn을 사용하려면 시작 프로젝트를 다운로드하고 터미널에서 엽니다.

컴퓨터에 Yarn이 설치되어 있지 않은 경우 아래 명령을 사용하여 Yarn을 설치해야 합니다.

npm install –g yarn

참고: Apple의 Mac OS를 사용하는 경우 NPM을 사용하여 글로벌 패키지를 설치하려고 하면 권한 오류가 발생할 수 있습니다. 이런 일이 발생하면 다음을 시도해 보세요.

sudo npm install –g yarn

Yarn을 설치한 후 이를 사용하여 프로젝트에 종속성을 설치할 수 있습니다. 종속성을 설치하려면 아래 명령을 실행하십시오.

yarn install

기존 프로젝트에서 작업하는 경우 프로젝트에 개별 패키지를 설치할 수도 있습니다. JavaScript Angular 구성 요소 패키지용 Ignite UI 설치하려면 아래 명령을 실행하십시오.

yarn add igniteui-angular2

성공적으로 설치되면 프로젝트에 node_modules 폴더가 추가된 것을 확인할 수 있습니다. 애플리케이션을 실행하려면 아래 명령을 실행하십시오.

yarn start

모든 것이 올바르면 위 명령으로 애플리케이션이 시작되고 아래와 같이 애플리케이션이 실행됩니다.

3단계 동적 모듈 로더 작업

SystemJS는 런타임에 모듈을 가져올 수 있는 모듈 로더이며 ES6 모듈 로더 위에 구축되었습니다. ES6 코드 또는 TypeScript를 트랜스파일할 수 있습니다. SystemJS는 AMD 및 CommonJS와 같은 다양한 유형의 모듈 형식과 함께 작동할 수 있습니다. 또한 JavaScript 모듈용 Ignite UI와 함께 작동하고 지원할 수도 있습니다.

다운로드한 프로젝트에서 System.config.js 파일을 열어 아래와 같이 Ignite UI for JavaScript Angular 구성 요소에 대한 매핑을 찾습니다.

'igniteui-angular2': 'npm:igniteui-angular2'

또한 아래와 같이 로드할 JavaScript Angular 구성 요소 패키지용 Ignite UI 찾을 수 있습니다.

'igniteui-angular2': {
  main: 'index.js',
  defaultExtension: 'js'
}

system.config.js의 패키징 및 매핑 정보로 인해 Angular 애플리케이션에 JavaScript 모듈용 Ignite UI 필요한 경우 SystemJS에 의해 애플리케이션에서 동적으로 로드됩니다.