维护 PhoneGap 混合/Web 应用程序代码库

Posted 2023-03-14

【中文标题】维护 PhoneGap 混合/Web 应用程序代码库

【英文标题】：Maintaining a PhoneGap Hybrid/Web App Codebase

【发布时间】：2014-05-12 09:49:28

【问题描述】：

我正在调查维护跨平台（web、ios、android）phonegap 代码库所涉及的复杂性，该代码库允许平台特定代码（和资产/测试）尽可能简单。

我目前采用的最佳方法是使用 grunt 构建典型 Web 应用程序的代码，然后使用 grunt-phonegap 模块生成相应的 phonegap 项目。

我相信这会奏效，但是对于我的 phonegap 项目，我知道我需要使用一些专门编写的插件来利用一些设备功能（这些不是典型的 cordova 插件）

我想知道是否有人想出了一种方法来维护可以适应不同平台和要求的代码库。 javascript 没有#IF_DEF 功能，但是否可以使用 grunt 实现类似的功能？

【参考方案1】：

我最近自己也有同样的问题。我在网上找不到太多关于这方面的信息，所以我决定深入研究 Grunt、Node 和 Git。

Grunt 和节点

在我的 Cordova 项目的根文件夹中（与 www、platforms、merges 和 plugins 文件夹一起），我有一个 grunt 项目。我将模块化 JavaScript 文件和 CSS 文件存储在 Cordova 项目根目录内的 src 文件夹中，这些文件可能依赖于平台，也可能不依赖于平台。这个 grunt 项目构建了存储在 src 文件夹中的 JavaScript 和 CSS，并根据需要将生成的文件放入 www 或 merges 文件夹中。

我什至编写了一个繁重的任务，通过优化和缩小 css、javascript 和 html 模板来构建应用程序的生产版本，然后重新构建 Cordova 平台项目以包含这些生产文件。

因为 JavaScript 中没有#IF_DEF，所以我必须使用 Grunt（上面提到过）为每个平台构建 JavaScript。我按平台模块化了几乎所有的 JavaScript 函数。如果该功能没有平台差异（没有本机挂钩），我只需要一个文件。如果存在差异，我需要为该功能的每个平台创建一个单独的文件。例如，我的 Cordova onDeviceReady 和 onResume 函数通常因平台而异。我创建了名为

的文件

CordovaEvents-ios.js and CordovaEvents-android.js

在 package.json 文件中，我描述了我想要在我的应用程序中使用的“功能”。 CordovaEvents 是一个特性的例子。

我也支持“论据”。我在模块化文件的文件名中使用上述相同的方法。参数可能如下所示

CordovaEvents-ios--production.js and CordovaEvents-android--production.js

在这种情况下，生产应用程序所需的代码将不同于非生产代码。我可以在构建过程中简单地传递这个参数（或参数列表），正确的文件将被拾取和构建。如果有一种方法可以维护可以适应不同平台和要求的代码库，我认为这最能解决您的问题。要求是功能名称和参数。参数可以是任何你想要的，可能使用一个插件或另一个插件。

我还描述了我想要支持的平台（“iOS”、“Android”和“Desktop”）。 Grunt 在 MultiTask 中处理每个平台，然后查看我想要支持的功能。它将尝试找到一个名为 feature-platform.js 的文件。如果找不到此文件，它将尝试查找 feature.js。在我将平台所需的所有功能连接在一起后，它会将文件复制到 iOS 或 Android 的合并文件夹中。通常，根项目中 WWW 文件夹中保存的所有文件都可以在桌面上运行，因为没有原生 Cordova 钩子……这允许我在 Chrome 中进行调试。所有包含本机挂钩的文件都存储在合并文件夹中。一旦为相应平台构建了 Cordova 项目，就可以在设备模拟器中测试代码。

如果您是 Grunt 的新手，我强烈建议您查看他们的入门指南。

http://gruntjs.com/getting-started

Git

我还使用 Git 对我的代码进行版本控制。我使用 SourceTree 在我的 Cordova 项目的根文件夹中创建 Git 存储库，并在我的 Mac Mini 服务器上有一个远程存储库，我也可以推送我的提交。这使我们能够拥有代码的备份副本，这样我的团队也可以在带外处理代码。

我 Git 忽略以下文件夹：

node_modules 插件 平台 插件

我的 Cordova 项目的根目录中包含的所有其他文件和文件夹都是版本化的。我使用以下链接作为参考来帮助定义我的 Cordova 的 Git 策略：

https://leanpub.com/developingwithcordovacli/read#version-control

我不是一夜之间就弄清楚了所有这些东西，实际上花了两个多月的时间。我希望我的回答可以作为您和其他人的指南，以解决您在开篇文章中提到的问题。

【讨论】：

这是一个非常合理的策略。我没有考虑在平台基础上标记文件名。我将结合使用 requirejs 和 grunt 多任务来创建插件样式行为，因此非平台特定代码可以以可靠的方式访问平台特定代码 - 任何复杂性都将被隐藏。非常感谢您花时间写这篇文章。一旦我给它一个很好的尝试，我会更新:)

@KraigWalker 很高兴我能帮上忙！

【参考方案2】：

我正在使用 gruntjs、javascript、jade、bower 和 phonegap 来构建混合 Web 应用程序和 phonegap 移动应用程序。经过一番调查，我决定使用玉模板语言来创建我的 html 和 javascript 文件。这是我的设置。

//begin grunt module
module.exports = function(grunt) 
var $jadeConfigObject = 
          compileDevelopment: 
            options: 
              pretty: true,
              data: 
                debug: true,
                **phonegap : '<%= isPhonegapBuild %>'**
              
            ,

            files: [
              expand: true,
              cwd : "src",
              src: "**/*.jade",
              ext: ".html",
              dest:"dist/development/www/"

            ]
          
    ;

grunt.initConfig(
    pkg: grunt.file.readJSON('package.json'),
    clean: [$dist_folder,"www"],
    jade: $jadeConfigObject
     // other gruntjs tasks
  )


grunt.registerTask('setPhonegap', 'Set Phonegap related values.', function(n) 
  **grunt.config.set('isPhonegapBuild', true);**
);
 grunt.registerTask('buildPhonegap', ['setPhonegap','buildDevelopment'
,'copy:phonegap_www']);

现在解释

使用 gruntjs setPhonegap 任务来区分 phonegap 构建和普通 Web 应用程序构建。 任务 setPhonegap 设置 isPhonegapBuild 配置属性，该属性反过来被玉配置对象使用。然后我可以在翡翠文件中使用“if phonegap”语句。

我的翡翠布局文件中有以下行

include ../includes/mainJavascript.jade

mainJavascript.jade

if phonegap
  script(type='text/javascript',src='#mainFolder/cordova.js')
  script(type='text/javascript',src='#mainFolder/cordova_plugins.js')
  script(type='text/javascript',src='#mainFolder/plugins/org.apache.cordova.device/www/device.js')
  script(type='text/javascript',src='#javascriptServicesFolder/pushTokenService.js')
  script(type='text/javascript',src='#javascriptFolder/plugins/com.phonegap.plugins.PushPlugin/www/PushNotification.js')
  script(type='text/javascript',src='#javascriptFolder/phonegap/pushNotificationHelper.js')

这样我有以下功能

我的 Web 应用程序不包含任何与 phonegap 相关的脚本或 html 我可以使用翡翠布局（母版页）非常轻松地简化我的文件。 向每个页面添加新的 javascript 或更改应用程序中每个页面的每个 html 非常容易。

请注意，phonegap 需要 www 文件夹用于其构建脚本，因此我创建了以下目录结构。

src -- every code file here, jade, javascript
www -- only created for phonegap build
dist/development/www -- normal development www build
dist/production/www -- production www build

我在源代码管理中忽略了 www/* 和 dist/*。我只使用 src 玉和 javascript 文件。将此设置添加到 bower，我相信这是一个不错的选择。