Manage cordova plugins with npm + package.json

Question

We have an Angular + Ionic + Cordova project with multiple devs that we'd like to manage cordova plugin dependencies for. We are using Cordova CLI 5+, and when manually running the install commands (e.g. cordova plugin add cordova-plugin-camera), a new line gets added to the cordovaPlugins section of the package.json file. Here's what the finished product looks like:

"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"
]

That's all great, except we can't find any way for dev #2 to npm install those plugins - instead, he has to run the commands individually, which then adds a duplicate line to package.json, dirtying the repository. We are sure there must be a command to install these, but can't find it. Can anyone shed some light?

Answer 1

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

Answer 2

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

Answer 3

What Caused Our Issue

We had originally used this Ionic + Cordova + Grunt seed project to spawn our initial app. The project includes a number of Cordova hooks that, among other things, add and remove platforms and plugins from the relevant cordovaPlatforms and cordovaPlugins sections in package.json when you run the corresponding command (i.e. cordova plugin add cordova-plugin-media adds a line to cordovaPlugins).

To better support local testing (trying new versions of a plugin, for example), and to prevent cross-dev dependency issues, we disabled the seed project hook and now hand-craft the package.json as needed.

Properly Managing Cordova Plugins

In turns out, the Ionic CLI uses package.json to manage Cordova app state in terms of platforms and plugins (as of version 1.3.19, it appears).

Populating package.json with two sections, cordovaPlatforms and cordovaPlugins has allowed us to do a simple ionic state restore to get the Cordova environment in shape for emulation, building, etc.

Specifying Versions

To further lock-down our app's state and development environment, we've also specified the target version of the Cordova platforms and plugins that we are using by adding the version number. Here's what we use:

{
  ...
  "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.