フロントエンドエンジニアリングの自動化を実現するrequire.context使用

require.contextは何ですか

、特定のコンテキストを取得するためにrequire.context機能を実行することにより、主にインポートモジュールを自動化するために使用されるAPIのWebPACKの、フロントエンドエンジニアリング、あなたは多くの場合、モジュールの導入からフォルダが発生した場合、あなたはこのAPIを使用することができ、それがされます各明示的にインポートモジュールのインポートを呼び出さないように、自動的にインポートされた後、指定されたファイルフォルダを横断し、そして。

require.context機能は3つのパラメータを取ります

  • ディレクトリ{文字列} - ファイルパスを読み出します

  • useSubdirectories {ブール} - ファイルサブディレクトリを横断するかどうか

  • 正規表現正規表現{} - 正規一致するファイル

语法:require.context(ディレクトリ、useSubdirectories = falseを、REGEXP = /^.//);

機能の実行が返す機能をrequire.contextことに注目し、この関数は3つのプロパティを持ってい

  • 解決{関数} - パラメータ要求を受け付け、要求は、プロジェクト全体に対する相対パスと一致するドキュメントを返す、テストフォルダ以下のファイルへの相対パスと一致

  • キー{関数} - 正常一致なるモジュールの名前の配列を返します

  • ID {文字列} - ID実行環境、主にmodule.hot.acceptに使用される文字列戻りは、熱がロードされなければなりません

これらの特性は、三の関数(特性の関数として、関数オブジェクト、対応する属性であることに注意)であるように

もう一つの人気の場所は、SVGのアイコンである、あなたは以前iconfontに比べて、アイコンファイルを毎回インポートすることはできませんrequire.context、SVGを強くお勧め多くの利点がありますが、あなたが詳細を見ることができます

手はあなたのエレガントな使用のアイコンと手を触れる:juejin.im/post/59bb86 ...

あなたはこれらの非常に一般的なインフラストラクチャコンポーネントの唯一のグローバル登録をrequire.context使用することができます。 cn.vuejs.org/v2/guide/co ...

著者:ハート_c2a2リンク:www.jianshu.com/p/c894ea00d ...出典:著者によって予約ジェーン帳著作権の書簡、いかなる形で再現され、承認を得るために、作者に連絡して、ソースを明記してください。

ます。https://juejin.im/post/5d0304a2e51d451063431802で再現

おすすめ

転載: blog.csdn.net/weixin_34337265/article/details/93170910