Geekly Articles each Day

JavaScript | HTMLプリプロセッサ

親愛なる友人たちこんにちは！


すばらしい1日、すばらしい1時間、JS | HTMLプリプロセッサが急務であり、いつものように、既製のソリューションの検索が失敗し、どこでも何かが欠落していました（グローバル変数、行の挿入、行の置換、インポートなどはありませんでした） ） まあ、私は厳しいヤクートの男なので、たった1つの方法しかありませんでした。 え？ まあ、私は自分の仕事の結果をコミュニティの意見に乗せることにしました。

はじめに



プリプロセッサは、js（json）およびhtml（xhtml）ファイルを対象としています。これらのファイルには、対応する拡張子が必要です。 プリプロセッサは次の機能をサポートしています。



コメントは制御構造を挿入するために使用されるため、プリプロセッサによって処理される前にコードに干渉することはありません。

打ち上げ方法



プリプロセッサは、1つの必須引数を必要とする通常のgroovyスクリプトです。

project.sourceDir-置換が行われる初期ディレクトリへのパス。

また、2つのオプションを指定することもできます

project.confFile-グローバル設定のあるファイルへのパス。
project.excludeDir-置き換える必要のないフォルダーのコンマ区切りの名前（ここでは、これが最下位レベルのフォルダーの名前であるとすぐに言います。このフォルダーへのパスは考慮されません。はい、マイナスです。

mavenを使用して、過去の標準ツールを実行することもできます。

運営



操作の注意属性は厳密な順序に従う必要があります（順序は以下のコマンドの反対側で説明します）が、オプションの属性（パターン、if、タイプ）は使用できません。以下にマークしますか？ defineを除くすべての操作で、最後の属性はif = ^ condition ^です。conditionは条件で、key = valueの形式で記述されている場合、名前キーを持つグローバル変数またはローカル変数の値がvalueと一致する場合、操作が実行されます。 conditionという名前のグローバル変数またはローカル変数が存在する場合、操作が実行されます。

次に、操作の完全なセットと例での使用方法を説明しますが、上記で使用方法を説明したのでifの例は示しません。

開閉制御構造は異なる行にある必要があり、挿入/置換されたテキストはそれらの間になければなりません！

挿入（挿入？If）

使用例：


html


<!--insert <script type="text/javascript" src="vendors/release/dojo/dojo-mini.js" ></script> <script type="text/javascript" src="vendors/release/dijit/dijit-mini.js" ></script> <script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script> /insert-->


js


 /*insert var mode = 'dev' /insert*/


置換（置換？パターン？If）

to-置換される文字列（プレースホルダーをサポート）
pattern-サブストリング置換パターン

例


html


 <!--replace to=^<script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script>^--> <script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script> <!--/replace-->


コントロールコメント間のすべてをto属性の値に置き換えます。

 <!--replace to=^/release/^ pattern=^/dev/^--> <link rel="stylesheet" type="text/css" href="vendors/dev/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" type="text/css" href="vendors/dev/dojox/grid/resources/Grid.css"> <link rel="stylesheet" type="text/css" href="vendors/dev/dojox/image/resources/Lightbox.css"> <!--/replace-->


コメントの間の各行で、 パターン属性の値と一致するすべてのサブストリングをto属性の値に置き換えます。

js


 window.appVersion = /*replace to=^${project.version}^*/0.6/*\replace*/;


コントロールのコメント間の行をto属性の値に置き換えます。

 /*replace to=^dojo^ pattern=^dijit^*/ dojo.require("dijit.layout.LayoutContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.form.TextBox"); /*/replace*/


コメントの間の各行で、パターン属性の値と一致するすべてのサブストリングをto属性の値に置き換えます。

ファイルのインポート（ファイルのインポート？タイプ？If）

file-ファイルパス、絶対パスを記述するのが最適です（プレースホルダーをサポート）
type-ファイルの種類、追加のファイル処理はこれに依存します（現在はcssの種類がサポートされていますが、ファイルのコンテンツは1行にパックされ、styleタグで囲まれています

例

html


 <!--import file=^path^ type=^css^-->


js


 //import file=^path^ type=^css^


ローカル変数（キー=値を定義|キー）

ローカル変数の初期化（現在のファイルのスコープ）。 キーのみが指定されている場合、空の変数が作成されます。
キー -変数名
値 -値

例

html


 <!--define debug=true--> <!--define env=qa-->


js


 //define debug=true //define env=qa


ローカル変数は、同じファイル解析実行で上から下に順番に初期化されます。つまり、変数がファイルの途中で定義されている場合、上記の制御構造では使用できません。

グローバル変数


プリプロセッサは、操作で使用できるグローバル変数を含むファイルで指定できます。

mavenを使用して変数でファイルを指定する例（コマンドライン引数を使用できます）

 <project.confPath>${pom.basedir}/configuration/qa.json</project.confPath>


ファイル形式


key0：value0
key1：value1

プレースホルダーの使用


window.appVersion = /*replace to=^${version}^*/0.6/*/replace*/;

式$ {version}は、対応するグローバル変数またはローカル変数variableの値に置き換えられます。

さらに、変数の操作がサポートされており、現時点では1つしか実装されていません。変数値の末尾と先頭から引用符を削除します。
$ {rootPath： removeQuotes }

おわりに


原則として、これですべてです。誰かに役立つなら、見つかったバグや提案に感謝します。

Github


ソースとテストページ： github.com/iseeyou911/JSPP
テスト/ qa.json構成ファイル。 index.htmlでインポートを機能させるには、修正する必要があります
並んで
 <!--define path=../tests/-->

このフォルダーへの絶対パス。

Source: https://habr.com/ru/post/J137870/

More articles:


All Articles