⛰️ ♟️ 🚨 Apache Cordova用のWindows Phone JavaScriptデバッガーの作成 🔹 ❎ 🚵🏾

友人たち、 Apache Cordovaのオープンソースフレームワークの次のリリースが発表されたのはそれほど前ではありません。詳細はアナウンスから確認できます。
興味深い機能の1つの詳細を急いで共有します。この機能はリリースではそれほど明確ではなく、宣伝されていますが、Apache Cordovaのプラグイン開発者の生活を大幅に促進し、ほぼ無限の活動分野を提供します。愛してください：

CB-6481 Add unified hooks support for cordova app and plugins

以下に、この機能を使用してWindows Phone JavaScriptデバッガーをApache Cordovaのプラグインとして作成する方法を示します。以下のビデオで結果を見ることができます（HDをオンにして見る）

Apache Cordovaフックとは何ですか？

Apache Cordovaを使用しているアプリケーション開発者のほとんどは、フックについて知っていませんが、それらは存在しており、非常に長い間ですら存在します。これらは、プログラマーがフレームワークの標準動作を拡張または変更するために追加できる特別なスクリプトです。リリース4.0のリリースで、この機能は大幅に拡張、統合され、 プラグイン開発者が利用できるようになりました 。フックの使用に関するすべての詳細は、こちらをご覧ください。

そして、なぜこれがまったく必要なのでしょうか？すべてのApache Cordova JavaScript Apiプラグイン（コアまたはサードパーティ）。プラグインを担当するプラグマンモジュールは、プラグインに含めることができる要素のかなり限られたリストをサポートします。たとえば、目的のネイティブdllやネイティブコードを含むいくつかの追加ファイルを追加します。しかし、複雑なプラグインを開発する場合、まだ提供されていないことを行う必要があるという問題に直面します。たとえば、一度、 WebSQLプラグインの作業中に、追加のcmdパラメーターのサポートが必要になりました。C++の依存関係のためにAnyCPUでビルドできず、文書化されていないハック、実装ホールを使用し、これが引き続き機能することを祈りました。これで、追加のスクリプト（nodejsまたはその他の実行可能ファイル）を公式に追加して、追加の必要なロジックをプログラムできます。 npm-scriptsに似ています。

Windows Phone 8 JavaScriptデバッガー

フックがどのように機能し、その力を発揮するかを確認するために、Windows Phone 8でJavaScriptaをデバッグするためのプラグインを作成します。プラグインのソースコード全体は、こちらにあります。

1.新しいプラグインを作成し、オープンソースのJavaScriptデバッガーAardwolfを内部に配置します。同時に、plugin.xmlはほとんど空です。

 <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:rim="http://www.blackberry.com/ns/widgets" id="org.apache.cordova.debug.wp8" version="0.0.1-dev"> <name>WP8 Debugger</name> <description>Cordova WP8 Debugger Plugin</description> <license>Apache 2.0</license> <keywords>cordova,debug, wp8</keywords> <repo></repo> <issue></issue> </plugin>

2. Windows Phone 8プラットフォーム用のスクリプト（フック）を追加します。これは、ビルド中（pre_package）およびアプリケーションの起動後（after_run）に実行されます。

plugin.xml

 <platform name="wp8"> <hook type="pre_package" src="scripts/injectDebugger.js" /> <hook type="after_run" src="scripts/startDebugServer.js" /> </platform>

3.カスタムスクリプトの機能を実装します

scripts / injectDebugger.js-ソースJavaScriptファイルを難読化し、Aardwolfが認識できるようにそれらを特別な場所に移動します。 aardwolf.jsをドラッグして目的のhtmlファイルに動的に接続しないように、そのコンテンツをcordova.jsに直接記録します。

 module.exports = function(ctx) { if(ctx.cmdLine.indexOf('--debug') <= 0) { // debugger should run in debug mode only return; } console.log('WP8Debugger: preparing js files for debugging...'); var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf'); var serverWwwCopyDir = path.join(serverRoot, 'files/www'); var platformRoot = path.join(ctx.opts.projectRoot, 'platforms/wp8'); console.log('Copy original www content'); if (fs.existsSync(serverWwwCopyDir)) { shell.rm('-rf', serverWwwCopyDir) } shell.cp('-rf', path.join(platformRoot, 'www/*'), serverWwwCopyDir); console.log('Rewriting js files'); rewriteFilesInDir(platformRoot, path.join(platformRoot, 'www')); console.log('config: ' + JSON.stringify(config)); console.log('inject Aardwolf to cordova.js'); var content = 'window.AardwolfServerUrl = "http://' + config.serverHost + ':' + config.serverPort + '";'; content += fs.readFileSync(path.join(serverRoot, 'js/aardwolf.js')).toString(); content += fs.readFileSync(path.join(platformRoot, 'www/cordova.js')).toString(); fs.writeFileSync(path.join(platformRoot, 'www/cordova.js'), content); console.log('WP8Debugger: done!'); }

scripts / startDebugServer.js-このスクリプトの唯一のタスクは、アプリケーション自体に合わせてAardwolfサーバーを起動することです。

 module.exports = function(ctx) { if(ctx.cmdLine.indexOf('--debug') <= 0) { // debugger should run in debug mode only return; } console.log('WP8Debugger: launching debug server...'); console.log('WP8Debugger: debug server host:' + config.serverHost); var serverRoot = path.join(ctx.opts.plugin.dir, 'Aardwolf'); shell.exec("explorer " + '"http://' + config.serverHost + ':' + config.serverPort + '"'); var cmdLine = 'node ' + path.join(serverRoot, 'app.js') + ' -h ' + config.serverHost; console.log(cmdLine); shell.exec(cmdLine); }

打ち上げ

1. Apache Cordovaをインストールします

 npm install -g cordova

2.アプリケーションを作成する

 cordova create testApp cd testApp

3.プラグインを追加する

 cordova plugin add location-of-cordova-debug-wp8

4.起動

 cordova run wp8 --debug

Apache Cordova用のWindows Phone JavaScriptデバッガーの作成

Apache Cordovaフックとは何ですか？

Windows Phone 8 JavaScriptデバッガー

打ち上げ

便利なリンク

More articles: