動的にインポートされたファイルを Webpack に実装する

ここで、webpack でファイルを動的にインポートする方法を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

初めて webpack を使い始めたとき、多くの人は、ファイルを要求するときに、静的な文字列パスを記述するのではなく、特定の実行状況に応じて変数を定義するなど、より柔軟な方法を使用できないかという考えを抱いたかもしれません。どのファイルが必要かを判断してください。

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

当時、管理システムの開発には 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)), &#39;demo&#39;)
 });
}

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

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

いくつかの情報を確認した後、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つのファイルに書きました。おそらく、異なるファイルで解析するための相対パスの使用に問題があるので、使用する場合は注意が必要です。

上記は私があなたのためにまとめたものです。

関連記事:

vue2.0 のスワイパーコンポーネントを使用してカルーセルを実装する (詳細なチュートリアル)

Vue で Compass を使用する具体的な方法は何ですか?

Vue の計算プロパティのキャッシュ機能をオフにする方法具体的な手順は何ですか?

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