Wijmo npm 패키지가 @grapecity scope로 새롭게 변경되었습니다. 이는 Public npm에서 바로 사용할 수있는 다중 모듈 형식의 이점을 제공하고, 더욱 간소화된 선언을 통해 개발이 쉬워집니다.

지금까지 모든 Wijmo npm 모듈은 단일 'wijmo'npm 패키지에 저장되었습니다. 이제 모든 모듈은 @ grapecity/wijmo.input 또는 @grapecity/wijmo.grid와 같은 @grapecity 범위에서 별도의 패키지로 표시됩니다.

새로운 범위의 패키지를 사용하도록 응용 프로그램을 전환하려면 응용 프로그램 코드를 수정해야합니다. 즉 'import'문에서 Wijmo 모듈 이름을 업데이트해야합니다. 

예를 들어, 범위가 지정되지 않은 wijmo.grid 모듈을 가져 오는 'import'문은 아래와 같습니다:

import * as wjcGrid from ‘wijmo/wijmo.grid’;

이를 범위가 지정된 패키지 모듈을 사용하는 다음 명령문으로 재 작업해야합니다.

import * as wjcGrid from ‘@grapecity/wijmo.grid’;

기존 애플리케이션을 새로운 Wijmo 패키지로 원활하게 전환 할 수 있도록 범위가 지정되지 않은 'wijmo'패키지를 일정 기간 계속 유지합니다. 즉, 최신 Wijmo 릴리스 버전은 범위가 지정된 패키지와 범위가 지정되지 않은 패키지로 계속 사용 가능합니다.

그러나 가장 가까운 시간 동안 새로운 범위의 패키지를 사용하도록 응용 프로그램 업데이트를 해야만합니다.

언뜻보기에 응용 프로그램을 새로운 범위의 패키지로 전환하는 것은 악몽일 수 있습니다. 그러나 실제로 최신 코드 편집기의 "파일에서 찾기 및 바꾸기(Find and Replace in files)"기능을 사용하면, 작업을 완료하는 데 몇 분 정도 밖에는 걸지지 않습니다.

아래에서는 응용 프로그램을 범위가 지정된 모듈 사용으로 전환하는 데, 필요한 단계를 설명합니다. 

여기에서는 VSCode를 에디터로 사용하지만, 필요한 경우"찾기 및 바꾸기"기능을 제공하는 다른 에디터를 사용하여 자유롭게 수정할 수 있습니다. 아래 설명 된 순서대로 단계를 수행해야합니다.

Wijmo 설치

이전 버전에서는 다음 명령을 사용하여 Wijmo를 설치했습니다.

> npm install wijmo

응용 프로그램의 package.json에서 다음 줄에 매핑됩니다.

“dependencies” : {
    “wijmo”: “5.20183.568”,
    …
}

새로운 NPM 설치 :

> npm install @grapecity/wijmo.all
, or in package.json:
“dependencies” : {
    “@grapecity/wijmo.all”: “5.20191.603”,
    …
}

만약 특정 프레임 워크의  Wijmo 모듈의 하위 집합만 필요하다면, 아래의 예와 같이 설치하면 됩니다.

예를 들어, 아래는 Angular 전용 패키지 만 설치할 수 있습니다.

> npm install @grapecity/wijmo.angular2.all
…
“dependencies” : {
    “@grapecity/wijmo.angular2.all”: “5.20191.603”,
    …
}

또는 프레임 워크를 사용하지 않으면, 아래와 같이 핵심 순수 JavaScript Wijmo 모듈만을 설치할 수 있습니다.

> npm install @grapecity/wijmo.purejs.all
…
“dependencies” : {
    “@grapecity/wijmo.purejs.all”: “5.20191.603”,
    …
}

응용 프로그램 코드 변경

일반적으로 모든 'wijmo/xxxx' 접두사(prefixes)를'@grapecity/xxxx'로 바꿔야합니다. style/theme 및 culture 파일은 각각 @grapecity/wijmo.styles 및 @grapecity/wijmo.cultures 패키지로 이동 되었기 때문에 상황이 약간 다릅니다. 

이로 인해  style/theme 및 culture의 import 영역을 업데이트하려면 별도의 단계가 필요하며 JS 모듈 import를 업데이트하기 전에 수행해야합니다.

스타일과 테마

스타일 및 테마 파일 import를 업데이트하려면, 다음 문자열 교체를 수행해야합니다.

'wijmo/styles/ --> '@grapecity/wijmo.styles/

코드는 ', "또는`와 같은 import 문에서 모듈 이름에 다른 따옴표를 사용할 수 있습니다. 이를 관리하기 위해 다음과 같은 검색 및 바꾸기 패턴과 함께 Regex 기반 문자열 대체를 사용합니다.

검색 : ([ ' "`])wijmo/styles/

교체 : $1@grapecity/wijmo.styles/

따라서 VSCode에서 :

• 응용 프로그램 코드를 저장하는 폴더를 검색 루트 폴더로 사용하여 검색 (폴더에서 찾기) 창을 엽니 다.
• 위 검색을 입력하고 패턴을 해당 검색 창 필드로 바꿉니다.
• 검색 필드에서 정규식 사용 및 대소 문자 구분 아이콘이 선택되어 있는지 확인하십시오.
• 검색 및 바꾸기 결과 영역에서 제안된 교체가 올바른지 확인하십시오.
• 모두 바꾸기 아이콘을 클릭 하여 업데이트를 수행하십시오.

이 스크린 샷은이 작업을 수행하는 예를 보여줍니다.

문화(Culture)

문화권(culture) 파일 가져 오기를 업데이트하려면, 다음 문자열 교체를 수행해야합니다.

'wijmo/cultures/ --> '@grapecity/wijmo.cultures/

이를 위해 스타일에서 설명한 것과 동일한 검색 및 바꾸기 패턴으로 수행하면 됩니다.

검색:

(['"`])wijmo/cultures/

교체:

$1@grapecity/wijmo.cultures/

JS 모듈

JS 모듈 import를 업데이트하려면 다음 문자열 교체를 수행해야합니다.

'wijmo/ --> '@grapecity/

이를 위해 스타일에 대해 설명 된 것과 동일한 단계인, 검색 및 바꾸기 패턴으로 수행하십시오.

검색:

(['"`])wijmo/

교체:

$1@grapecity/

위에서 설명한 모든 단계를 수행한 후, 응용 프로그램을 빌드하여 업데이트 된 코드가 작동하는지 확인하십시오.