How to add javascript library or packages in cordova?

Question

I am developing Android app using cordova, and I want to add some javascript library in my project. For example, if I want to add async.js, Openlayers and some other library in my cordova app and I don't want to add them manually, how should I resolve this?

Answer 1

We're doing a Cordova app where I work right now.

We primarily use npm to download any dependencies (like lodash, for example, or any other dependencies available via npm). Then we use webpack to bundle all of the dependencies, and then reference the bundle in www/index.html:

<script src="bundle.js"></script>

Answer 2

I'm using npm+bower+gruntto manage the depencies, and it works.

In npm, you will define the packages you need including the cordova plugins in package.json:

{
  "name": "i18n",
  "version": "1.3.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "cordova": "~5.3.3",
    "grunt": "~0.4.5",
  },
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "test": "grunt test"
  },
  "cordovaPlatforms": [
    "ios",
    "android"
  ],
  "cordovaPlugins": [
    "org.apache.cordova.device",
    "cordova-plugin-compat",
    "cordova-plugin-console",
    "cordova-plugin-geolocation"
  ]
}

Then you will manage your dependencies in bower.json, for example:

{
  "name": "i18n",
  "version": "1.3.0",
  "dependencies": {
    "ngCordova": "~0.1.18",
    "ng-cordova-oauth": "~0.1.4"
  },
  "devDependencies": {
    "ngCordova": "~0.1.15-alpha"
  }
}

How you build the project is through grunt build, and you want to build the src into www or asset/www. And you can cordova run <platform> or grunt serve to run the app.

Answer 3

TLDR and simple

Use the npm package: cordova-import-npm

Long question and DIY

Because I wanted to avoid bundlers such as webpack or grunt, I used an Apache Cordova Hook

Just add this to your config.xml

<hook src="hooks/importNpmPackages.js" type="before_prepare"/>

And create this file hooks/importNpmPackages.js

const fse = require('fs-extra')
const path = require('path')

const twoSpaces = '  ' // for log indentation
var projectRoot

module.exports = function (context) {
  console.log(`${context.hook} : ${path.relative(context.opts.projectRoot, context.scriptLocation)}`)

  projectRoot = context.opts.projectRoot
  console.log(twoSpaces + 'Project root directory: ' + projectRoot)
  copyFile('jquery', path.join('dist', 'jquery.min.js'), path.join('www', 'js', 'res', 'jquery.min.js'))

  copyFile('bootstrap', path.join('dist', 'js', 'bootstrap.min.js'), path.join('www', 'js', 'res', 'bootstrap.min.js'))
  copyFile('bootstrap', path.join('dist', 'css', 'bootstrap.min.css'), path.join('www', 'css', 'res', 'bootstrap.min.css'))
}

function copyFile (npmPackage, // oficial name of the npm package from which the file is to be copied from
  fileRelativePath, // file path with respect to the main directory of the npm package (node_modules/<package>/)
  destFilePath) { // file's path to where it is copied, relative to the project bin/ directory
  // trick to get the npm module main directory
  // https://stackoverflow.com/a/49455609/1243247
  const packageDirFullpath = path.dirname(require.resolve(path.join(npmPackage, 'package.json')))
  const fileOriginFullPath = path.join(packageDirFullpath, fileRelativePath)
  const fileDestFullPath = path.join(projectRoot, destFilePath)

  fse.copySync(fileOriginFullPath, fileDestFullPath)

  const consoleMsg = npmPackage + ': ' +
    path.relative(projectRoot, fileOriginFullPath) + ' -> ' +
    path.relative(projectRoot, fileDestFullPath)

  console.log(twoSpaces + consoleMsg)
}

It simply copies the desired dependencies files to the www folder where you decide. In this exemple I copy jquery and bootstrap.