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

【问题标题】：How to add javascript library or packages in cordova?如何在cordova中添加javascript库或包？
【发布时间】：2016-07-25 22:02:30
【问题描述】：

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

【问题讨论】：

www 文件夹中有一个名为 js 的文件夹，将您的脚本放在那里，然后在 index.html 文件中引用它们。
这是您“手动”添加脚本的方式，我正在寻找一些包管理器解决方案。
你可以使用任何构建 spa、requirejs、webpack、bower 等的东西。
@dandavis，这个问题的解决方案很灵活，我会提供一个凉亭。
使用这个 npm 包：npmjs.com/package/cordova-import-npm

标签： javascript cordova package-managers

【解决方案1】：

我们正在开发我现在工作的 Cordova 应用程序。

我们主要使用npm 下载任何依赖项（例如lodash，或通过npm 获得的任何其他依赖项）。然后我们使用webpack来打包所有的依赖，然后在www/index.html中引用这个包：

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

【讨论】：

应该可以，但我找到了使用 npm+bower+grunt 来管理依赖项的解决方案。
虽然我用我熟悉的知识解决了这个问题，但我认为 webpack 更易于使用和学习。
如果我想将我的开发作为cordova插件导出，webpack包是否也包含在内？
我实际上成功地构建了bundle.js，它拥有我需要的一切。但是当我想在app.js 中使用bundle.js 中的函数时，它失败并给了我“未定义捆绑包”错误。
检查这个包npmjs.com/package/cordova-import-npm

【解决方案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 运行该应用程序。

【讨论】：

检查这个包npmjs.com/package/cordova-import-npm

【解决方案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
  // 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)
}

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

【讨论】：