Geekly Articles each Day

CleverStyle FrameworkでのAlameda、Bower、およびNPMの統合

前の記事で 、フレームワークが静的にどのように機能するかを学習できます。静的には、フレームワーク専用に作成されたコンポーネントが付属しています。


同時に、Bower / NPMパッケージの形式で膨大な数のサードパーティコンポーネントがあり、フレームワークもこれを単純化し、完全に統合します。


アラメダ


Alamedaには、AMDモジュールをロードするためのフレームワークが付属しています。 フレームワーク自体がAlamedaの構成を生成するため、完全なパスなしでモジュール名を使用するだけで必要なモジュールを呼び出すことができます。


フレームワークモジュール用のAMDモジュール


トートロジーについては申し訳ありませんが、そのように聞こえます。 必要になる前にページに不要なコードをロードしないために、AMDモジュールをフレームワークモジュールで使用することもできます。


ここでは次の操作が行われます。



たとえば、 MyModuleモジュールのmeta.json ：


 { "package" : "MyModule", "category" : "modules", ... "provide" : "my_feature", ... }

2つのエイリアスが作成されます。



AMDモジュールがパスmodules/MyModule/assets/js/my_module.jsにある場合、たとえばmy_feature/my_moduleとして呼び出すことができます。 便利なことに、1つのAMDモジュールの代替実装が複数ある場合、インストールされているものがこの場合に使用されます。


BowerパッケージのAMDモジュール


フレームワークがサイトのルートにあるbower_componentsディレクトリのコンテンツをスキャンする場合、検出された各パッケージのAlameda構成（オプションpackages構成Alameda）を次の形式で生成します。


 { "name" : "jquery", "main" : "dist/jquery", "location" : "/bower_components/jquery" }

パッケージの生成により、jQueryのような単一のファイルからのモジュールだけでなく、 lodash-amdようなより複雑な構成もサポートできます。ここでは、ライブラリ全体ではなく、その一部のみをロードできます（フレームワークの古いバージョンではエイリアスのみを生成できます）。


ディレクトリの名前はモジュールの名前なので、jQueryはjqueryとして使用できます。


mainキーで使用するファイルを理解するために、 bower.jsonの同じ名前のキーbower.json （ファイルの配列が指定されている場合は最初のJavaScriptファイル）。


NPMパッケージのAMDモジュール


bower_componentsと同様に、フレームワークはnode_modulesディレクトリも分析します。


package.jsonの分析はより複雑です。これは、多くのパッケージが主にNode.jsで使用するためのものだからです。


ブラウザ環境で使用するのに適したファイルを見つけるために、フレームワークはpackage.jsonで次のキーを優先度の高いものから低いものの順に試します。



使用の過程で、これをまだサポートしていないパッケージ（ Redux 、 seamless-immutable ）のPRを行わなければならない場合があります。


フレームワークモジュールの依存関係としてのBower / NPMパッケージ


フレームワークにはオプションのComposer assetsモジュールがあり、 meta.jsonキーrequire_bowerおよびrequire_npmフレームワークモジュールのBower / NPM依存関係を宣言的に指定できます。


これらの依存関係は、対応するモジュールに対して自動的にインストールされます。これにより、サーバー上のターミナルへのアクセスもインストールされたNode.jsも必要ありません。競合がある場合、モジュールのインストールは中断されます。つまり、統合が完全になります。


次のようになります。


 { ... "require" : [ "System>=6.25", "System<7.0", "composer_assets" ], "require_npm" : { "qrcodejs" : { "version" : "1.0.0", "files" : [ "qrcode.js" ] } } }

まず、必要なキーのサポートが追加されるため、 composer_assets機能への依存を示す必要があります。これがないと、フレームワークはrequire_npm何であるかを理解しません。


第二に、必要なモジュールと（オプションで）接続する必要があるファイルを指定する必要があります。
実際、フレームワークはデフォルトでパッケージにAMDモジュールが含まれていると見なし、上記と同様の構成を生成します。 ただし、単純なJavaScriptファイル、スタイルシート、またはWebコンポーネントを接続する必要がある場合があります。


AMDモジュールのみが必要な場合は、構成を次のように簡素化できます。


 { ... "require_npm" : { "jquery" : "^3.0.0" } }

統合の重要なポイントの1つは、パスbower_componentsおよびnode_modules沿ってComposer assetsを介してインストールされたパッケージのエイリアスのサポートです。 つまり、jQueryはパス/node_modules/jquery/dist/jquery.jsに沿った最後のスニペットからアクセスできますが、ファイルは物理的にパス/storage/Composer/vendor/npm-assets/jquery/dist/jquery.jsに沿って配置されます。


生産モード


フレームワーク設定で静的のキャッシングと圧縮を有効にすると、 {require_npm|require_bower}.*.filesからのファイル{require_npm|require_bower}.*.filesはフレームワークモジュールで提供されるファイルと同じ処理を受けるため、サポートされる最適化のほとんどがここに適用されます。


「野生」の多くのパッケージの典型的なものは、通常の組み立てられたモジュールとその縮小バージョンの保守です（ bower.jsonとpackage.jsonには、通常のものが示されています）。 したがって、 dist/jquery.jsは、実際にはdist/jquery.min.jsではなくdist/jquery.min.jsがロードされます。


アラメダのカスタムバージョン


残念ながら、多くの場合、フレームワークにはサードパーティプロジェクトのカスタマイズされたビルド、この場合はカスタムバージョンのAlamedaが付属しています。


オリジナルの問題は、「ワイルド」には完全に正しく形成されていないモジュールがあり、Alamedaがパッチなしでサポートすることを拒否していることです。カスタムバージョンはそのようなモジュールをロードできるため、そうでなければ手動で設定する必要がなくなります。


そのような不正の例ですが、現在フレームワークモジュールでサポートされています


 define('inline-styles-formatter',[], function () { ... }); define('as-html-formatter',[], function () { ... }); define('scribe-plugin-inline-styles-to-elements',[ './inline-styles-formatter', './as-html-formatter' ], function ( inlineStylesFormatter, asHtmlFormatter ) { ... });

Alameda開発者との状況の議論はここで見つけることができます 、そして、望ましい機能を備えたフォークはここにあります 。


最後に


ご覧のとおり、フレームワークはBower / NPMパッケージをインストールする標準的な方法と完全に統合され、フレームワークモジュールの依存関係のレベルでそれらをサポートします。


AMDパッケージ構成は、正しく構成されたパッケージの大部分に対して自動的に生成されます。


新しいアイデアと建設的なコメントに常に満足しています。


» GitHubのリポジトリ



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

More articles:


All Articles