Skip to content

GitLab

Last edited by Administrator
Page history
This is an old version of this page. You can view the most recent version or browse the history.

[IONIC] 플러그인 만들고 GitHub에 배포하여 사용하기

안녕하세요, 주은우입니다.

이 글은 락코 드라이버에서 사용될 플러그인(Background Floating)을 만들고 어떻게 사용했는지에 대한 가이드 문서입니다.

글에서 설명이 없고 링크만 있는 부분은 해당 블로그에 잘 기술되어 있으니 참고해 보시기 바랍니다.

목차

  • Cordova Plugin 만들기
  • Plugin 깃허브에 올리기
  • Node Module 빌드 후 깃허브에 올리기
  • 프로젝트에 만든 Plugin 사용하기
  • 참고
    • 아이오닉 개발 팀의 ionic-native를 wrapping 가이드 문서

내용

Cordova Plugin 만들기(아이오닉 버전 말고 코르도바 버전으로 생성)

Plugin 깃허브에 올리기 (깃허브 Personal access token > 28d1243bec3ffda4002b4f32d112d4e3d3c7033d)

contact@mediagram.co.kr 계정에 Private Repository를 만들어서 사용합니다.

프로젝트는 플러그인 자체를 복사해서 붙여넣음

$ ionic cordova plugin add git+ssh://git@github.com:<group|user>/<repo>#<branch>

Node Module 빌드 후 깃허브에 올리기

플러그인을 올리는 방식과 동일합니다. 다만, ionic-native로 wrapping한 이후에 빌드하여 나온 프로젝트를 올립니다.

$ git clone git@github.com:ionic-team/ionic-native.git

$ cd ionic-native

$ npm install

$ npm install gulp

$ gulp plugin:create -n <PLUGIN_NAME>

$ cd src/@ionic-native/plugin/<PLUGIN_NAME (UNDERSCORE CASE)>

$ vi ./index.ts

// > index.ts 를 플러그인의 www/<PLUGIN_NAME>.js 에 맞게 수정한다.

// > 아래 링크 "5.- Create an Ionic wrapper scaffold" 항목 참고

// > https://joangape.blogspot.com/2019/11/create-custom-cordova-plugin-for-ionic4.html

$ cd ../../../..

$ npm run build

$ cd dist/@ionic-native/plugins/

// > 패키지명으로 생성된 디렉토리가 잘 있는지 화인한다. (경로도 미리 확인 할 것)

// 깃허브에서 생성한 빈 프로젝트로 이동한다.

$ cd <PROJECT_NAME>

$ npm init

// 빌드된 플러그인 복사

$ cp -r <ionic-native 경로>/dist/@ionic-native/plugins/<PLUGIN_NAME> .

// 플러그인을 깃허브에 올리기 편 설정을 한다. (.npmrc 생성, package.json 생성 등)

$ git add *

$ git commit -m "first commit"

$ git push

$ npm publish

프로젝트에 만든 Plugin 사용하기

$ ionic cordova plugin add git+ssh://git@github.com:<group|user>/<repo>#<branch>

$ npm install git+ssh://git@github.com:<group|user>/<repo>#<branch>

참고

아이오닉 팀의 ionic-native를 wrapping 가이드 :: https://github.com/ionic-team/ionic-native/blob/master/DEVELOPER.md