web-dev-qa-db-ja.com

JavaScriptの条件付き「ビルド」

特定のソースからの参照をホストページで検索し、ホバーすると、定義/参照テキストをツールチップ（ Google Dicitionary など）に表示するJavaScriptコードに取り組んでいます RefTagger ）

私の問題は機能そのものにあるのではなく、実装でのブラウザ固有のニュアンスを処理することです。少なくとも3つの「エディション」を作成しますが、重要な違いはわずかです。

  • <script src="..."/>タグとしてWebサイトに埋め込まれる「スタンドアロン」バージョン
  • Chromeプラグイン
  • firefoxプラグイン。

この状況をどのように処理できますか、条件付きセクションを理解する何らかのJSプリプロセッサがありますか？ Cのような#ifdefコメントのようなものは、無関係な部分を取り除くのに便利です。

（例として、特定の問題：

メインコードはalmostすべて同じです。プラグインは設定を処理するためにいくつかの追加機能を必要としますが、これらは別のファイルにあります。ただし、コンテンツの挿入は、少なくとも2つの異なる方法で行う必要があります。

  • innerHTMLは最新のブラウザで動作しますが、 Firefoxアドオンガイドライン はその使用を禁止しています（理由を理解し、このポリシーを受け入れます）
  • 代わりにDOM操作メソッドを使用することもできますが、注入するコンテンツにはHTML要素を含めることができるため、それを解析して再作成する必要があります（ホワイトリストに基づくフィルタリングを使用）。これは DOMParser で実行できますが、text/htmlをコンテンツタイプとして使用する場合は、IE <10をサポートするために多くの互換性コードを追加する必要があります。

したがって、基本的には、Firefoxプラグイン以外の任意の場所でinnerHTMLを使用できます。または、ページの読み込み遅延を最小限に抑えるために、スタンドアロンバージョンに追加したくないDOMメソッドを追加できます。異なるバージョンの条件付きセクションのようなものを使用して、これらすべてのエディションを1つのファイルに実装することは素晴らしいことです。）

javascripttoolscross-browserautomation
2
molnarm

OK

不要なコード領域（およびすべての条件付きマークアップ）を削除するスクリプト：

[Regex]::Replace(
    [Regex]::Replace(
        (Get-Content $source -Raw),
        '(?sm)// #if ((!' + $condition + ')|(?!' + $condition + ')[A-Z]+).*?// #endif \1',
        ''
    ),
    '// #(end)?if !?[A-Z]+',
'') |
Set-Content $output

入力ファイル（$sourceで設定）には、次のようなセクションを含めることができます。

if(cache[reference]){
// #if FIREFOX
    addContent(cache[reference]);
// #endif FIREFOX
// #if !FIREFOX
    tooltip.innerHTML = cache[reference];
// #endif !FIREFOX
    return;
}

Firefox固有のバージョンを取得するには、次のようなスクリプトを使用します（params宣言を追加し、script.ps1に保存した後）：

powershell -File script.ps1 input.js output.js FIREFOX
0
molnarm