如何在 cordova 中添加 javascript 库或包？

Question

我正在使用 cordova 开发 Android 应用程序，我想在我的项目中添加一些 javascript 库。例如，如果我想在我的 cordova 应用程序中添加 async.js、Openlayers 和其他一些库，但我不想手动添加它们，我应该如何解决这个问题？

Answer 1

我现在工作的地方正在开发一个 Cordova 应用程序。

我们主要使用 npm 下载任何依赖项（如 lodash, for example, or any other dependencies available via npm). Then we use webpack 捆绑所有依赖项，然后在 www/index.html 中引用捆绑包：

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

Answer 2

我正在使用 npm+bower+grunt 来管理依赖项，它有效。

在npm中，您将在package.json中定义您需要的包，包括cordova插件：

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

然后您将在bower.json中管理您的依赖项，例如：

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

您如何构建项目是通过 grunt build，并且您想将 src 构建为 www 或 asset/www。您可以 cordova run <platform> 或 grunt serve 到运行应用程序。

Answer 3

TLDR 和简单

使用 npm 包：cordova-import-npm

长问与DIY

因为我想避免使用 webpack 或 grunt 等捆绑器，所以我使用了 Apache Cordova Hook

只需将此添加到您的 config.xml

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

并创建这个文件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
  // 
  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)
}

它只是将所需的依赖文件复制到您决定的 www 文件夹中。在这个例子中，我复制了 jquery 和 bootstrap.

如何在 cordova 中添加 javascript 库或包？

How to add javascript library or packages in cordova?

javascript

package-managers

cordova

TLDR 和简单

长问与DIY