时间戳

首页 > 解决方案 > 在cordova上复制额外的文件准备

cordova - 在cordova上复制额外的文件准备

问题描述

根据cordova文档 cordova prepare：

将 config.xml 元数据转换为特定于平台的清单文件，复制图标和闪屏，复制指定平台的插件文件，以便项目准备好使用每个原生 SDK 构建。

我使用cordova，npm并且当我运行npm update包时会自动更新。在这种特殊情况下，我使用了 npm 包jquery，其主文件存储在node_modules/jquery/dist/jquery.min.js. 然后我手动将此文件复制到www/js/res/jquery.min.js，然后通过以下方式加载它www/index.html：

<script src="js/res/jquery-ui.min.js"></script>

但我想在cordova prepare.

因此问题是：您如何自定义您的cordova prepare, 以便您可以将额外的文件复制到www目录？

标签： cordova

解决方案

只是为了提供一些关于我如何实现它的反馈。你必须使用cordova hooks。

首先在以下位置添加以下行config.xml

<hook type="after_prepare" src="scripts/importNpmPackages.js" />

然后创建一个节点脚本scripts/importNpmPackages.js来完成这项工作，即将文件从node_modules目录复制到您想要的位置。我用这个：

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

var projectRoot

module.exports = function (context) {
  console.log(context.hook + ': Importing npm packages files')

  projectRoot = path.resolve(path.dirname(context.scriptLocation), '..')
  console.log('Project root directory:', projectRoot)
  copyFile('jquery', path.join('dist', 'jquery.min.js'), path.join('www', 'js', 'res', 'jquery.min.js'))
}

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(consoleMsg)
}

推荐阅读