npm 기반의 어플리케이션에 Wijmo 참조하기
참고 npm에서 설치하는 것 외에도 Wijmo Dev Kit을 다운로드하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.
설치
Wijmo는 @mescius npm 범위의 wijmo.* 패키지 세트로 npm에 표시되며, @mescius/wijmo.all 은 라이브러리의 모든 패키지를 나타냅니다. npm 패키지와 마찬가지로, 사용하기 위해서는 컴퓨터에 NodeJS가 설치되어 있어야합니다.
NodeJS 명령 프롬프트 에서 다음 명령을 실행하여 npm에서 최신 Wijmo 릴리스 버전을 설치할 수 있습니다.
npm install @mescius/wijmo.all릴리즈 빌드 외에도 릴리즈 후보(RC)와 Nightly 빌드도 발행합니다. RC와 Nightly 버전은 오직 테스트만을 위한 것이며, 실제 개발시에는 사용되어서는 안됩니다.
최신 RC 빌드를 설치하려면 다음 명령을 사용하십시오.
npm install @mescius/wijmo.all@rc최신 나이틀리 빌드를 설치하려면 다음 명령을 사용하십시오:
npm install @mescius/wijmo.all@nightly패키지 그룹 설치하기
일반적으로 여러분이 사용하는 프레임워크에 따라, 당신의 어플리케이션에서 특정한 부분집합의 Wijmo 패키지만 필요로하게 됩니다.
Wijmo는 이 작업을 용이하게 하는 특별한 그룹 패키지(Wijmo.*.all)를 제공합니다. 그룹 패키지에는 코드가 포함되어 있지 않으며, 그룹과 관련된 실제 패키지를 npm 또는 *yarn*이(가) 플랫폼을 설치하도록 강제하는 패키지 종속성만 명시합니다.
핵심 순수 JavaScript 패키지만 설치하려면 다음 명령을 사용하십시오:
npm install @mescius/wijmo.purejs.all핵심 순수 JavaScript 패키지와 함께 특정 프레임워크에 대한 패키지만 설치하려면, 다음 명령을 사용하십시오.
npm install @mescius/wijmo.{framework}.all여기서 {framework} 섹션에는 다음 값 중 하나를 취할 수 있습니다: angular2 , react , vue2 , webcomponents , angular , knockout.
예를 들어, 아래 명령은 순수한 JavaScript 패키지와 함께 Angular interop 패키지만 설치 합니다.
npm install @mescius/wijmo.angular2.all특정 패키지 설치
특정 Wijmo 패키지를 설치할 수도 있습니다. 또한 해당 패키지가 의존하는 모든 패키지가 자동으로 설치됩니다.
예를 들어, 응용 프로그램에 wijmo.grid 패키지만 필요한 경우 다음 명령을 사용하여 설치할 수 있습니다.
npm install @mescius/wijmo.gridwijmo.grid 가 사용하는 다음 패키지가 자동으로 설치됩니다.
@mescius/wijmo.input
@mescius/wijmo
@mescius/wijmo.styles
스타일 설치
SCSS 소스와 함께 Wijmos CSS 스타일 및 테마 파일은 별도의 @mescius/wijmo.styles 패키지로 제공됩니다.
가장 기본적인 @mescius/wijmo 패키지는 스타일 패키지에 대한 종속성을 선언하므로 다른 Wijmo 패키지와 함께 자동으로 설치되므로 일반적으로 이 패키지를 명시적으로 설치할 필요가 없습니다.
문화권(cultures) 설치
언어/국가별 형식 설명자(descriptors)와 UI 문자열이 있는 culture 파일은 별도의 @mescius/wijmo.cultures 패키지로 제공됩니다. 다음 명령을 사용하여 설치할 수 있습니다.
npm install @mescius/wijmo.cultures애플리케이션에 Wijmo 추가
자바스크립트 모듈 추가
모든 Wijmo 패키지에는 package.json 메인(main) 필드에서 참조되는 ES5+CommonJS 파일이 기본 형식인 여러 형식(ES5 / ES2015 언어 버전과 CommonJS/ESM 모듈 형식의 조합)으로 된 JavaScript 파일이 포함되어 있습니다. Webpack 번 들러 또는 SystemJS 런타임 모듈 로더와 같은 모듈을 로드할 수 있는 도구와 함께 사용할 수 있습니다.
TypeScript 또는 Babel이 지원하는 Wijmo 모듈을 애플리케이션으로 가져오려면, ES2015 import 문을 사용할 수 있습니다. import 문의 모든 모듈 이름은 @mescius/ 접두사로 시작하고 그 뒤에 모듈 이름이 옵니다. 예를 들어, 다음 코드는 wijmo.grid 모듈을 가져와서 FlexGrid 컨트롤의 인스턴스를 만듭니다.
import * as wjcGrid from "@mescius/wijmo.grid";
let grid = new wjcGrid.FlexGrid("#hostElement");ES5에서 코드를 작성하면 CommonJS의 require() 함수를 사용하여 모듈을 가져올 수 있습니다. 예를 들면 다음과 같습니다.
var wjcGrid = require("mescius/wijmo.grid");
var grid = new wjcGrid.FlexGrid("#hostElement");스타일 추가
컨트롤이 화면에 올바르게 표시 되려면 Wijmo CSS 스타일 파일에 대한 참조를 추가해야 합니다. HTML 페이지에 링크 태그를 추가하여 다음 중 하나를 수행 할 수 있습니다 .
<link href="node_modules/@mescius/wijmo.styles/wijmo.css" rel="stylesheet" />또는, 다음과 같이 ESM import 문을 사용 하십시오.
import "@mescius/wijmo.styles/wijmo.css";또는 아래와 같이 (상대 경로와 함께):
import "./node_modules/@mescius/wijmo.styles/wijmo.css";import 문에 지정된 경로의 실제 형식은 응용 프로그램에 사용된 번들러 또는 런타임 모듈 로더 및 해당 구성 설정에 따라 다릅니다. SPA 응용 프로그램의 경우 응용 프로그램의 루트 모듈 어딘가에 css 파일을 한 번만 가져 오면 충분합니다.
같은 방법으로 테마 파일을 가져올 수 있습니다. 예를 들면 다음과 같습니다.
import "@mescius/wijmo.styles/themes/wijmo.theme.cerulean.css";테마 파일을 가져오는 경우, 기본 wijmo.css 스타일 파일을 가져올 필요가 없습니다.
문화권(cultures) 추가
import 문을 사용하여 @mescius/wijmo.cultures 패키지를 가져와 특정 문화 파일을 적용할 수 있습니다.
import "@mescius/wijmo.cultures/wijmo.culture.ja";다양한 프레임워크와 함께 Wijmo 사용
NPM으로 Wijmo 사용하기 , 포스팅을 참고해 주세요. Wijmo의 NPM 모듈을 통해, Angular CLI, create-react-app, Vue CLI, 그리고 IONIC CLI와 같은 인기있는 개발 도구와 함께 사용하는 방법에 대한 자세한 내용을 볼 수 있습니다.