programing

npm + package.json으로 Cordova 플러그인 관리

nasanasas 2020. 12. 24. 23:48
반응형

npm + package.json으로 Cordova 플러그인 관리


우리는 Cordova 플러그인 종속성을 관리하려는 여러 개발자가있는 Angular + Ionic + Cordova 프로젝트가 있습니다. 우리가 사용하는 코르도바 CLI 5+를 , 때 수동으로 (예를 들어, 설치 명령을 실행 cordova plugin add cordova-plugin-camera, 새 행이 추가됩니다) cordovaPlugins의 섹션 package.json파일. 완성 된 제품의 모습은 다음과 같습니다.

"cordovaPlugins": [
  "cordova-plugin-camera",
  "cordova-plugin-console",
  "cordova-plugin-contacts",
  "cordova-plugin-device",
  "cordova-plugin-dialogs",
  "cordova-plugin-file",
  "cordova-plugin-geolocation",
  "cordova-plugin-media",
  "cordova-plugin-media-capture",
  "cordova-plugin-network-information",
  "cordova-plugin-splashscreen",
  "cordova-plugin-statusbar",
  "cordova-plugin-vibration",
  "com.ionic.keyboard"
]

그것은 모두 훌륭합니다. 우리가 npm에서 플러그인을 설치하는 방법을 찾을 수 없다는 점을 제외하면, 대신 그는 명령을 개별적으로 실행해야합니다. 그런 다음 중복 된 줄을에 추가 package.json하여 저장소를 더럽 힙니다. 이를 설치하기위한 명령이 있어야한다고 확신하지만 찾을 수 없습니다. 누구든지 빛을 비출 수 있습니까?


문제의 원인

우리는 원래이 Ionic + Cordova + Grunt 시드 프로젝트 를 사용하여 초기 앱을 생성했습니다. 프로젝트에는 해당 명령을 실행할 때 (예 : 에 행 추가) 관련 섹션에서 플랫폼 및 플러그인을 추가 및 제거 하는 여러 Cordova 후크포함되어 있습니다 .cordovaPlatformscordovaPluginspackage.jsoncordova plugin add cordova-plugin-mediacordovaPlugins

로컬 테스트 (예 : 새 버전의 플러그인 시도)를 더 잘 지원하고 개발 간 종속성 문제를 방지하기 위해 시드 프로젝트 후크를 비활성화하고 이제 package.json필요에 따라 직접 제작합니다 .

Cordova 플러그인을 올바르게 관리

결과적으로 Ionic CLIpackage.json플랫폼 및 플러그인 측면에서 Cordova 앱 상태를 관리하는 데 사용 합니다 ( 버전 1.3.19 현재 나타남).

채우기 package.json두 부분으로, cordovaPlatforms그리고 cordovaPlugins우리가 간단하게 할 수있었습니다 ionic state restore구축, 에뮬레이션 모양의 코르도바 환경을 얻을 수를 등

버전 지정

앱의 상태 및 개발 환경을 추가로 잠그기 위해 버전 번호를 추가하여 사용중인 Cordova 플랫폼 및 플러그인의 대상 버전도 지정했습니다. 우리가 사용하는 것은 다음과 같습니다.

{
  ...
  "cordovaPlatforms": [
    "android@4.0.2",
    "ios@3.8.0"
  ],
  "cordovaPlugins": [
    "cordova-plugin-camera@1.1.0",
    "cordova-plugin-contacts@1.1.0",
    "cordova-plugin-device@1.0.1",
    "cordova-plugin-file@2.1.0",
    "cordova-plugin-media@1.0.1",
    "cordova-plugin-media-capture@1.0.1",
    "cordova-plugin-network-information@1.0.1",
    "cordova-plugin-splashscreen@2.1.0",
    "cordova-plugin-statusbar@1.0.1",
    "cordova-plugin-vibration@1.2.0",
    "com.ionic.keyboard@1.0.5"
  ]
}

tl; dr

Once you have the above in your package.json, you can then ensure that your local environment is in the proper state via ionic state restore (v1.3.19+) which will chew through package.json and install platforms and plugins as needed.


You can add a postinstall command. Look below

{
  "cordovaPlugins": [
    "com.ionic.keyboard@1.0.4",
  ],
  "cordovaPlatforms": [
    "android@4.1.1",
  ],
  "scripts": {
    "postinstall": "ionic state restore",
    "clean": "ionic platform remove android; ionic platform remove ios; ionic platform remove browser; git checkout package.json"
  }
}

Bonus : use npm run clean followed by npm install if you wish to start clean i.e reinstall all platforms


may be it's a bit late into the game, but this is my postinstall script

    "postinstall": "bower i && gulp && ionic state reset && ionic config build"
  • it installs the bower dependencies, e.g. ionic lib
  • it restores Cordova plugins
  • it re-builds the configuration you did via ionic config command

ReferenceURL : https://stackoverflow.com/questions/30042975/manage-cordova-plugins-with-npm-package-json

반응형