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?

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?

• javascript
• cordova
• package-managers

Share Improve this question Follow asked Jul 25, 2016 at 22:02 RandomEliRandomEli 1,56755 gold badges3131 silver badges5555 bronze badges 7

• 1 There is a folder inside www folder named js put your script there and then reference them inside your index.html file. – Morteza Tourani Commented Jul 25, 2016 at 22:04
• This is how you add scripts "manually", I'm looking for some package manager solutions. – RandomEli Commented Jul 25, 2016 at 22:05
• 1 you can use anything that builds a spa, requirejs, webpack, bower, etc. – dandavis Commented Jul 25, 2016 at 22:06
• @dandavis, the solution to this problem is quite flexible, I'll provide a bower one. – RandomEli Commented Jul 25, 2016 at 22:14
• use this npm package: npmjs./package/cordova-import-npm – João Pimentel Ferreira Commented Apr 21, 2021 at 9:27

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 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>

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-pat",
    "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.

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./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.