Webpack がファイルを動的にインポートする方法

今回は、webpack がファイルを動的にインポートする方法と、webpack がファイルを動的にインポートするための 注意事項 について説明します。実際のケースを見てみましょう。

初めて webpack を使い始めたとき、多くの人は、ファイルを

requireするときに、静的な string パスを記述するのではなく、 変数 を定義するなど、より柔軟な方法を使用できないかということを考えたことがあるかもしれません。特定の動作条件に従ってどのファイルが必要であるかを決定してください。

例えば、著者はこのようなニーズに遭遇しました。

当時、管理システムの開発には vue-router が使用されていましたが、管理システム自体にはディレクトリ配列があり、vue-router にもルート構成配列が必要であり、この 2 つはまさに関連していました。そのとき私は、ディレクトリ配列を維持して、ルート配列を動的に生成することはできるだろうかと考えていました。

そこで私は次のような小さなデモを実装しました:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 componentPath: './a.vue'
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), 'demo')
 });
}

これは上記とほぼ同じですが、当時はソースコードを残していなかったので、おそらくいくつかの可能性を無視して手動で例を書きました。

文法上の誤り。

このコードを実行すると、「重大な依存関係」というエラーが表示され始めました。

いくつかの情報を確認した後、webpack の動作メカニズムを大まかに理解しました。また、次のことも理解しました。

webpack の動的 require ファイルを使用することは不可能です。

webpack はパッケージ化ツールであり、それが実行される時間はプリコンパイルであることを知っておく必要があります。この方法では、webpack は知ることができないため、これは明らかに不可能です。どのパッケージをパッケージ化する必要がありますが、結果としてそれらのファイルはパッケージ化されないため、require は絶対に必要ありません。

この仕組みを理解すると、パスを直接渡して動的にルートを登録するのは不可能な解決策であると判断する必要があります。

では、ファイルを動的にインポートしたい場合はどうすればよいでしょうか?国を救うために、いくつかの変化球の解決策を検討することができます。

1. プリコンパイル段階で必要なパスを決定します。

パス文字列の保存に動的変数を使用する理由は、単純に、プログラムに文字列の結合などのアクションを実行してもらいたいからです。多くの場合、これらのプログラムは、実行時に実行しても、プリコンパイル中に実行した場合と同じ効果があります。たとえば、上記の例では、2 つのテーブルを手動で管理したくないだけです。その後、パッケージ化時にファイルの読み取りと書き込みを行って解析操作を動的に実行し、解析されたルート配列を指定されたファイルに書き込むことができます。これでは目的は達成できませんか？

2. コンポーネントオブジェクトを直接渡すのはどうですか?たとえば、次の実装方法:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

このソリューションは主にこの例のためのものですが、もちろん、他の状況にもインスピレーションを与えることができます。

しかし、結局のところ、これは妥協的な解決策であるということを理解する必要があります。つまり、コンパイル前の段階で、webpack はどのファイルをインポートするかを明確に認識する必要があります。そうしないと、解決策は実現できません。

ところで、インターネット上ではrequire(path)という言葉もありますが、require('./root/' + path)のようにpathが純粋な変数でない限り、このように組み合わせることができるのでしょうか？ここの require.ensure 関数で試してみましたが、うまくいきませんでした。もしかしたら私の使い方が間違っているのかもしれません。

もう一つ、コンポーネントオブジェクトを渡すとき、ファイルをまたぐといくつか問題があるようです。とにかく、ディレクトリ配列、ルート配列、解析処理を1つのファイルに書きました。おそらく、異なるファイルで解析するための相対パスの使用に問題があるので、使用する場合は注意が必要です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

babel の使用方法の詳細な説明

JS を模倣した古典的な伝説のゲーム

以上がWebpack がファイルを動的にインポートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。