背景最近、リーダーからコンポーネント ライブラリを構築するように依頼があり、プロジェクトで現在使用されているサードパーティ コンポーネント ライブラリのどのコンポーネントが最も頻繁に使用されているかを知りたいと思いました。最初は友達に相談したかったのですが、友達が忙しすぎて自分でやらなければなりませんでした。私のアイデアを実現するために webpack を使用できるかどうか疑問に思います。 効果@material-uiを使用します。使用するコンポーネントは次のとおりです。 成し遂げるローダーのソースは、以下に示すようにファイルの静的文字列であることがわかっています。 最も速い解決策は、正規表現を使用して文字列をカウントすることですが、コメントがある場合は統計が不正確になります。そのため、これを実現するために AST を使用できます。多くの専門家がすでに AST の概念について説明しているので、詳細には触れません。 AST の分析解析には@babel/parserを使用します。まずはウェブサイト上の次のコードを見てみましょう。 '@material-ui/core' から { Box } をインポートします。 '@material-ui/lab/Autocomplete' から Autocomplete をインポートします。 パスはprogram => bodyで、宣言型はtype: ImportDeclarationであることがわかります。次の構造を見てみましょう。 "ソース": { "タイプ": "文字列リテラル", "値": "@material-ui/core" }, // 2番目の段落 "source": { タイプ": "文字列リテラル", "値": "@material-ui/lab/オートコンプリート" }, このフィールドには必要なパッケージ名の値を送信するので、最初のコードは const ast = parser.parse(ソース、{ ソースタイプ: 'モジュール', プラグイン: ['jsx'], }); const getImport = 'ImportDeclaration'; const getMaterialImport = packageName || '@material-ui'; const importAst = ast.program.body.filter( // type ノード タイプ。ここではインポート宣言タイプをフィルタリングし、同時にフィルタリングします (i) => i.type === getImport && i.source.value.includes(getMaterialImport)、 ); 関連するast配列を取得したら、次のステップはコンポーネント名を取得することです。観察すると、指定子識別子フィールドにコンポーネント名を含む2つのフィールドがあることがわかります。インポート、ローカル
ここでは、インポートされたフィールドが次のメソッドに表示されないため、local を使用します。 '@material-ui/lab/Autocomplete' から Autocomplete をインポートします。 パッケージ名がわかったので、要点を押さえて完全なコードを投稿するのは簡単になります。 デモconst パーサー = require('@babel/parser'); 定数 loaderUtils = require('loader-utils'); 定数合計 = { 長さ: 0, コンポーネント: {}, }; // オブジェクトのソート const sortable = (obj) => Object.fromEntries(Object.entries(obj).sort(([, a], [, b]) => b - a)); module.exports = function(ソース) { console.log(ソース、'--'); const オプション = loaderUtils.getOptions(this); const { packageName = '' } = オプション; 定数コールバック = this.async(); if (!packageName) は callback(null, source); を返します。 試す { // ast に解析する const ast = parser.parse(ソース、{ ソースタイプ: 'モジュール', プラグイン: ['jsx'], }); もし(ast){ タイムアウトを設定する(() => { const getImport = 'ImportDeclaration'; const getMaterialImport = パッケージ名; const importAst = ast.program.body.filter( // type ノード タイプ。ここではインポート宣言タイプをフィルタリングし、同時にフィルタリングします (i) => i.type === getImport && i.source.value.includes(getMaterialImport)、 ); 合計の長さ = 合計の長さ + importAst.length; for (let i of importAst) { const { 指定子 = [] } = i; for (指定子のlet s) { (s.local)の場合{ const {名前} = s.local; total.components[名前] = total.components[名前] ? total.components[名前] + 1 : 1; } } } 合計コンポーネント = ソート可能(合計コンポーネント); console.log(合計、'合計'); コールバック(null、ソース); }, 0); } そうでない場合はコールバック(null、ソース); } キャッチ(エラー){ コールバック(null、ソース); } }; ローダーを呼び出す { テスト: /\.(jsx|)$/, 除外: /node_modules/、 インクルード: [appConfig.eslintEntry], 使用: [ { ローダー: path.resolve(__dirname, './loader/total.js'), オプション: パッケージ名: '@material-ui', }, }, ]、 }, 簡単な統計関数が完成しました。もちろん、他にももっと良い方法があるかもしれません。私はただこのアイデアを提案しただけです。議論を歓迎します やっとこれを行うことの重要性は何でしょうか? たとえば、独自のコンポーネント ライブラリがオンラインになった後、コンポーネント参照の数をカウントし、週などの特定の時間ディメンションを使用できます。データを使用して、コンポーネント ライブラリの次のバージョンの最適化の方向性を分析できます。また、KPI レポート ツールとして使用することもできます。結局のところ、それはデータによってサポートされています。 これで、50行のコードでWebpackコンポーネントを使用する方法についての記事は終了です。Webpackコンポーネントの使用統計の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS のクローン作成、Linux 仮想マシンの共有の完全な手順
>>: MySQL 5.7.18 リリース インストール ガイド (bin ファイル バージョンを含む)
疑問が生じるこの質問は、ファイルのダウンロードを記述しているときに発生しました。HttpServle...
目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...
ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...
Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...
目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
文章さて、次はレンダリングを見せましょう。画像を見て初めて理解することに興味が湧くでしょう。そうでな...
目次序文グローバルロックテーブルロックテーブルロックメタデータ ロック (MDL ロック)要約する参...
目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...
Docker コンテナのネットワーク障害に対する 6 つの解決策注: 以下の方法は、コンテナ内のパブ...
IntelliJ IDEA が Tomcat を使用して Javaweb プロジェクトをデプロイし...
序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...