svelte + capacitor + cordova + ionic 빌드하고 폰에 올려서 확인하기 

svelte + capacitor + cordova + ionic 관련된 문서들이 찾으면 나오는데, 통합으로 정리된것이 없는것 같아서 정리해 본다. 

개발 환경 설정  - mac 기준.

java, android studio, xcode, nodejs  등의 설치는 타 블로그나 웹 참조

cordova 를 이용해서 개발하셨던 분들은 거의 대부분 깔려 있을 것으로 본다.

1. svelte-ionic-app​  설치

npm install -g degit

degit Tommertom/svelte-ionic-app 프로젝트명
cd 프로젝트명
npm i 

package.json 파일을 오픈하여 내용 변경

 name : "svelte-ionic-demo-app" 의 svelte-ionic-demo-app​ 를 본인 프로젝트명으로 변경

svelte-ionic-app 를 설치하면 예제 샘플이 모두 설치되는데, 필요없는 폴더와 파일은 삭제한다.

​기능 및 스크립트 참조하려면 

https://ionicsvelte.firebaseapp.com 를 이용하면 됨

2. capacitor 설치

https://capacitorjs.com/solution/svelte#install 의 내용 참조

npm install @capacitor/core @capacitor/cli

npx cap init 프로젝트명 프로젝트ID --webDir=public 

위의 프로젝트명은 현재 폴더명이기도 하다.

프로젝트ID는 com.****.**** 요렇게 시작하는 com.회사명.서비스명 이렇게들 정하는 것 같다. 나중에 각 스토어에 등록할 이름 기준이다.

간혹 프로젝트명이 영문이면 어플이 한글이름으로 안바뀌는것 같은데, 컴파일 에러 안나게 하려면, 우선 영문으로하고 스토어등록할때 한글로 표기 바꿔주면될것 같은데 확실치는 않다.

3. 브라우저로 실행해서 디버깅하기

npm run dev

3-1  안드로이드 npm 등록​

npm install @capacitor/android ​

4. 디바이스 등록 

npx cap add android

npx cap add ios

- npx cap add ios 할때 안되고 cocoapods 설치하라고하면 sudo gem install cocoapods 로 설치후 npx cap add ios 실행

5. 웹소스 디바이스로 이동 

npx cap sync  앱 종속성 및 웹소스 이식(느림 :네이티브 기능 변경)

npx cap open 웹소스만 이식(빠름:웹 디자인만 변경)

6. 안드로이드 스튜디오 및 xcode 에서 확인

npx cap open android (안드로이드 스튜디오 열림)

npx cap open ios (xcode 열림)

개발 반복 순서

소스변경 => svelte 컴파일 => 디바이스 이식 => 각디바이스 컴파일

1. 개발환경 세팅

2. 프론트 소스 변경 및 디버깅

   가. src 폴더 하위의 내용변경

       - pages 폴더

         여기에 사이트 개발 하듯이 개발하면 됨

       - assets 폴더

         이미자나 참조 파일 넣는곳

       - components

         자주 사용하는 기능 정의해서 끌어다 쓰는 곳?

​

3. svelte 컴파일 및 브라우져 확인 등등(rollup.config.js 파일 내용이 실행됨)

    npm run dev 

    src 폴더 내용을 가지고 컴파일해서 public 폴더에 집어 넣음

    svelte 컴파일, typescript 적용, sass , livereload 등의 기능 설정해서 실행함

    디버깅

      - 브라우저 디버깅 툴 이용

4. 디바이스 이식

      npx cap sync 또는 npx cap copy

   public 폴더의 내용을 가져다가 android, ios 웹 폴더로 복사해 넣고 컴파일 함

  디바이스 상에서 웹 디버깅

   크롬브라우저 url 입력란에 chrome://inspect 입력 여기에서 inspact  클릭하면 디버깅 화면 나와서 확인 가능

5. android studio, xcode 네이티브 코딩 및 디바이스 설치 실행

  npx cap open android 

  npx cap open ios

  해당 프로젝트 폴더 기준으로 프로그램 실행됨

개발시 주의사항

개발시 프론트 내용(디자인,기능) 변경은

  /src 폴더 안의 내용을 변경하면 됨.

  직접 android나 ios 안의 웹폴더 내용을 변경하면 안됨. npx cap sync나 npx cap open이

  /src 폴더의 내용을 android, ios 폴더로 복사하는 과정에 덮어쓰게되어 내용이 사라짐.

  android나 ios 안의 네이티브 내용은 변경을 해도 웹폴더의 내용은 변경하면 안됨.