(1)Node.js 的使用
Cordova CLI 基于 node.js,所以有必要知道 nodejs 最基本的知識。
Js 代碼
// define:1個module1個js文件
exports.printFoo = function(){ return "foo" }
// import
var foo = require('./foo.js');
// call
console.log(foo.printFoo());
引用
node main.js
(2)2個重要的路徑
最新源碼可以從 Github 下載,目前穩(wěn)定版是3.4。
https://github.com/apache/cordova-cli
https://github.com/apache/cordova-android
(3)輸入命令到執(zhí)行完的過程
安裝完 Nodejs 后,npm 的路徑就被放到了環(huán)境變量 PATH 中。
引用
C:\Documents and Settings\RenSanNing\Application Data\npm
以下簡稱 NPM_ROOT,安裝完 Cordova 后,在這個文件夾下有:
所以在輸入 cordova cli 命令時,入口就是這兩個文件,以下以 cordova.cmd 為例說明。
a) 輸入命令(根據不同的命令處理不同,這里以添加平臺支持為例)
引用
cordova platform add android
b) 執(zhí)行
引用
node "%~dp0\node_modules\cordova\bin\cordova" %*
其中%~dp0代表的是 batch 文件所在路徑,比如執(zhí)行 C:\bat_files\example.bat,那么%~dp0 就是 C:\bat_files\。這里就是指 NPM_ROOT。類似 shell 的$0就是 Windows 下 batch 文件中獲取參數的一種方式,可以在命令行窗口執(zhí)行“for /?”可以查看詳細說明。啟動 node 執(zhí)行 cordova(nodejs)文件,并把所有參數傳給它。(%*:輸入的所有參數)
c) 執(zhí)行 cordova(nodejs)
路徑:
nodejs文件:cordova
addTs()函數是打印執(zhí)行時間,默認未開啟,所以只要代碼是:
Js 代碼
var CLI = require('../src/cli');
new CLI(process.argv);
****cordova.cmd 作用和 npm 文件夾下的 cordova.cmd 一樣,%~dpn0 代表帶路徑的 batch 文件名。
d) 進入
-> // 導入node_modules\cordova\src\util.js
-> var cordova_util = require('./src/util');
-> // 通過 addModuleProperty()方法加載不同命令的(比如這里的 platform)代碼
-> addModuleProperty(module, 'platform', './src/platform', true);
d.2)對輸入參數進行解析提取
d.3)根據不同命令執(zhí)行 cordova.raw[cmd].call();
比如調用 platform()方法。
e) 進入
Js 代碼
function platform(command, targets) {
// 驗證當前文件夾是否是Cordova-based project
var projectRoot = cordova_util.cdProjectRoot();
// 獲取Hooks文件
var hooks = new hooker(projectRoot);
// ...
// 調用相應的方法(比如:add)******
add(hooks, projectRoot, targets, opts)
}
Js 代碼
function add(hooks, projectRoot, targets, opts) {
// 讀入config.xml
var xml = cordova_util.projectConfig(projectRoot);
var cfg = new ConfigParser(xml);
// 執(zhí)行before_platform_add的Hook
hooks.fire('before_platform_add', opts)
// 獲取libDir的目錄即: <LIB_ROOT>\android\cordova\3.4.0
lazy_load.based_on_config(projectRoot, t)
// 調用Android SDK******
call_into_create(t, projectRoot, cfg, libDir, template, copts)
// 執(zhí)行after_platform_add的Hook
hooks.fire('after_platform_add', opts);
}
Js 代碼
function call_into_create(target, projectRoot, cfg, libDir, template_dir, opts) {
// ...
// 檢查平臺依賴***0***
module.exports.supports(projectRoot, target)
var bin = path.join(libDir, 'bin', 'create');
// 調用bat創(chuàng)建project***1***
superspawn.spawn(bin, args, opts || { stdio: 'inherit' })
// 調用prepare
require('../cordova').raw.prepare(target);
// 把merges文件夾下的文件覆蓋過去
createOverrides(projectRoot, target);
// 通過plugman安裝plugins下的所有插件***2***
plugman.raw.install(target, output, path.basename(plugin), plugins_dir);
}
0
Js 代碼
function supports(project_root, name) {、
// 平臺配置解析文件 <NPM_ROOT>\node_modules\cordova\platforms.js
// 具體Android在:src\metadata\android_parser
var platforms = require('../platforms');
var platformParser = platforms[name].parser;
// 檢查平臺依賴lib是否存在
platformParser.check_requirements(project_root);
}
1
進入
create.bat
引用
SET script_path="%~dp0create"
node %script_path% %*
create(nodejs)
Js 代碼
var create = require('./lib/create');
create.createProject(args._[0], args._[1], args._[2], args._[3], args['--shared'], args['--cli']).done();
進入
create.js
說是創(chuàng)建其實大部分都是從 libdir 拷貝過來的,執(zhí)行了一下“android update project”。
引用
C:\Documents and Settings\RenSanNing\.cordova\lib\android\cordova\3.4.0
Js 代碼
exports.createProject = function(project_path, package_name, project_name, project_template_dir, use_shared_project, use_cli_template) {
// ...
// 檢測Ant(ant -version),Java(java -version),Android(android list targets)
check_reqs.run();
// 前邊有很多Copy文件的準備工作,其中最重要的cordova.js就是從以下路徑Copy過來的。
// <LIB_ROOT>\android\cordova\3.4.0\framework\assets\www\cordova.js
// 這里就是創(chuàng)建Android工程的具體實現
// cmd:android update project --subprojects --path "platforms\android" --target android-19 --library "CordovaLib"
// CordovaLib工程也是從<LIB_ROOT>\android\cordova\3.4.0\frameworkCopy過去的
// target_api取得是<LIB_ROOT>\android\cordova\3.4.0\framework\project.properties的target=android-19
runAndroidUpdate(project_path, target_api, use_shared_project);
}
2
進入
plugman.js
進入
install.js
Js 代碼
function installPlugin(platform, project_dir, id, plugins_dir, options) {
//...
// 這里就是解析plugin.xml后安裝plugin的具體實現
runInstall(current_stack, platform, project_dir, plugin_dir, plugins_dir, options)
//...
}
Js 代碼
function runInstall(actions, platform, project_dir, plugin_dir, plugins_dir, options) {
//...
// Copy文件
copyPlugin();
handleInstall();
//...
}
Js 代碼
function handleInstall(actions, plugin_id, plugin_et, platform, project_dir, plugins_dir, plugin_dir, filtered_variables, www_dir, is_top_level) {
//...
plugman.prepare(project_dir, platform, plugins_dir, www_dir);
//...
}
進入
prepare.js
Js 代碼
scriptContent = 'cordova.define("' + moduleName + '", function(require, exports, module) { ' + scriptContent + '\n});\n';
從 plugins 往\platforms\android\assets\www\plugins 下 Copy 插件 JS 代碼的時候,添加了模塊的定義,所以最終執(zhí)行的插件的 JS 和安裝的 JS 是不一樣的。
Js 代碼
// 生成cordova_plugins.js
var final_contents = "cordova.define('cordova/plugin_list', function(require, exports, module) {\n";
final_contents += 'module.exports = ' + JSON.stringify(moduleObjects,null,' ') + ';\n';
final_contents += 'module.exports.metadata = \n';
final_contents += '// TOP OF METADATA\n';
final_contents += JSON.stringify(pluginMetadata, null, ' ') + '\n';
final_contents += '// BOTTOM OF METADATA\n';
final_contents += '});';
以上過程只是主要的處理流程,至此 Android 項目創(chuàng)建成功,并且以下兩個 Cordova 核心的 js 也放置到了相應的位置。
其他的命令各自有各自的作用,所以處理內容不同。特別要說的是執(zhí)行和 project 相關的命令時,最終會調用到各個平臺工程下的腳本,比如:platforms\android\cordova。放在 project 下的目的除過各個平臺的腳本不一樣以外,也使該工程更獨立,只要有 Nodejs 環(huán)境即可編譯運行。