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

Maintaining a PhoneGap Hybrid/Web App Codebase

本文关键字：应用程序 代码 Web PhoneGap 混合 维护      更新时间：2023-09-26

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

目前我采取的最佳方法是使用grunt来构建一个典型的web应用程序的代码，然后使用grunt-phonegap模块来生成各自的phonegap项目。

我相信这将工作，但是对于我的phonegap项目，我知道我将需要使用一些专门编写的插件来利用一些设备功能(这些不是典型的cordova插件)

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

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

Grunt and Node

在我的Cordova项目的根文件夹(旁边的www，平台，合并和插件文件夹)，我有一个grunt项目。我将模块化的JavaScript文件和CSS文件存储在Cordova项目根目录下的src文件夹中，这些文件可能依赖于平台，也可能不依赖于平台。这个grunt项目构建存储在src文件夹中的JavaScript和CSS，并根据需要将生成的文件放入www或merge文件夹中。

我甚至写了一个grunt任务，通过优化和最小化css, javascript和html模板来构建应用程序的生产构建，然后重建Cordova平台项目以包含这些生产文件。

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

的文件
CordovaEvents-ios.js and CordovaEvents-android.js

在包内。json文件，我描述了我想在我的应用程序中的"功能"。CordovaEvents是一个功能的例子。

我也支持"arguments"。我在模块文件的文件名中使用了相同的方法。参数可以像这样

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

在这种情况下，生产应用程序所需的代码将不同于非生产代码。我可以在构建过程中简单地传递这个参数(或参数列表)，然后就会选择并构建正确的文件。我认为这最接近地回答了你的问题，是否有一种方法来维护一个可以适应不同平台和需求的代码库。需求是特性名称和参数。参数可以是你想要的任何东西，可能使用一个插件或另一个插件。

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

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

http://gruntjs.com/getting-started

Git

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

I Git忽略以下文件夹:

  • node_modules
    • <
  • 插件/gh><
  • 平台/gh><
  • 插件/gh>

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

https://leanpub.com/developingwithcordovacli/read版本控制我花了两个多月的时间才弄明白这些东西，而不是一夜之间。

我希望我的回答可以作为你和其他人解决你在开头提到的问题的指南。

我正在使用gruntjs, javascript, jade, bower和phonegap来构建混合web应用程序和phonegap移动应用程序。经过一番调查，我决定使用jade模板语言来创建我的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应用程序构建。Task setPhonegap set isPhonegapBuild config属性，此属性反过来由jade config对象使用。然后我可以在jade文件中使用"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 jade和javascript文件。将此设置添加到bower中，我相信这是一个很好的选择。

相关文章：