前の記事で 、フレームワークが静的にどのように機能するかを学習できます。静的には、フレームワーク専用に作成されたコンポーネントが付属しています。
同時に、Bower / NPMパッケージの形式で膨大な数のサードパーティコンポーネントがあり、フレームワークもこれを単純化し、完全に統合します。
アラメダ
Alamedaには、AMDモジュールをロードするためのフレームワークが付属しています。 フレームワーク自体がAlamedaの構成を生成するため、完全なパスなしでモジュール名を使用するだけで必要なモジュールを呼び出すことができます。
フレームワークモジュール用のAMDモジュール
トートロジーについては申し訳ありませんが、そのように聞こえます。 必要になる前にページに不要なコードをロードしないために、AMDモジュールをフレームワークモジュールで使用することもできます。
ここでは次の操作が行われます。
- JavaScriptファイルを使用したフレームワークのすべてのモジュール（
modules/*/assets/js
ディレクトリの存在が確認されます） - モジュールの名前とそれが提供する各機能のエイリアスが作成されます（Alameda構成の
paths
オプション）
たとえば、 MyModule
モジュールのmeta.json
：
{ "package" : "MyModule", "category" : "modules", ... "provide" : "my_feature", ... }
2つのエイリアスが作成されます。
-
MyModule -> /modules/MyModule/assets/js
-
my_feature -> /modules/MyModule/assets/js
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
で次のキーを優先度の高いものから低いものの順に試します。
-
browser
-
jspm.main
-
main
使用の過程で、これをまだサポートしていないパッケージ（ 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パッケージ構成は、正しく構成されたパッケージの大部分に対して自動的に生成されます。
新しいアイデアと建設的なコメントに常に満足しています。