モジュールのインポート パスの問題は Webpack のコンパイル中に解決できますか?
P粉231079976
P粉231079976 2023-08-26 18:08:57
0
1
391
<p>環境変数に基づいてバンドル内の特定のコンポーネントのみを含むビルドを作成したいと考えています。 </p> <p>たとえば、次のようにコンポーネントをインポートすると: </p> <pre class="brush:php;toolbar:false;">「@/components/Module1」から Module1 をインポート</pre> <p>インポートが次のようになるようにパスを実際に変換したいと思います: </p> <pre class="brush:php;toolbar:false;">import Module1 from '@/components/brands/' process.env.APP_BRAND 'Module1'</pre> <p>すべてのインポートに対してこれを行うのではなく、特定のインポート (ブランド バージョンを持つモジュールなど) に対してのみこれを行いたいので、インポート パスの前に < code>!brand! のようなものを追加したいと思います。 </code>、これはパス変換を適用するためのインジケーターになります。 したがって、上記のロジックは次のインポート パスに対してのみ実行する必要があります: </p> <pre class="brush:php;toolbar:false;">「!brand!@/components/Module1」から Module1 をインポート</pre> <p><code>process.env.APP_BRAND</code> が false の場合、元のインポートを保持したいだけです (例: <code>!brand!</code> プレフィックスをパス )。 </p> <p>重要な点は、Webpack がモジュールを静的に分析して最適化されたビルドを作成できるように、これをビルド時に実行する必要があるということです。これは実現可能でしょうか?このパス変換ロジックを何とか追加する必要があると思うのですが、どうすればよいでしょうか?ローダーやプラグインを作成する必要がありますか、それとも既製のソリューションはありますか? </p> <p>Webpack 5 を使用しています。 </p>
P粉231079976
P粉231079976

全員に返信(1)
P粉714844743

Webpack には、ここで使用できるモジュール resolve 関数が用意されています。ドキュメントここを読んでください。たとえば、あなたの場合、これを行うことができます:

リーリー

ここでは、環境変数を Webpack プロセス (つまり、Node.js プロセス) に渡し、これに基づいて決定を下す必要があることに注意してください。さらに、解決モジュールは 絶対パス である必要があります。

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!