Sencha CMD 6.0 두개의 app 와 공동 ui 사용하기

Sencha cmd 와 extjs 를 사용할 때 두개의 app 와 공통된 package 를 생성해서 사용하는 방법입니다.

Work Space 생성

sencha --sdk /path/to/ext601 generate workspace ws

App 생성

cd ws

sencha generate app --ext App1 apps/app1

# default file name and location : /App1/index.html

sencha generate app --ext App2 apps/app2

# default file name and location : /App2/index.html

공통 package 생성 (classic/modern UI 부분만 생성 됨)

sencha generate package common

# package 사용을 위해서는 각 app 의 app.json 파일의 requires 부분에 common 을 추가 해주어야 함.

"requires": [

"common"

]

이렇게 적용한 후 구조는 아래와 같습니다.

ws/

    ext/

        src/

        ...

    packages/

        common/

            resources/

            sass/

            src/

            package.json

    apps/

        app1/

            ...

            app.json

        app2/

            ...

            app.json

Build 방법

sencha --pwd apps/app1 app build

sencha --pwd apps/app2 app build

--pwd 옵션은 workspace 폴더에서 app 를 빌드하기 위해 해당 app 로 이동하지 않고 빌드하기 위한 옵션입니다.

이렇게 두개의 app 를 생성하여 사용할 수 있습니다. 각 app 는 해당 폴더의 index.html 파일을 통해 view 를 볼 수 있습니다.

작은 사이트 의 경우는 하나의 app 로 모두 해결 할 수 있을 것 같은데 조금 복잡한 사이트에서는 여러개의 app 를 만들어 사용하는 것이 좋을 것 같습니다.

이상 Sencha CMD 6.0 두개의 app 와 공동 ui 사용하기에 대한 글 이였습니다.