web-dev-qa-db-ja.com

変数クエリ文字列でWebpackダイナミックインポートを使用する方法

Webpack 3を使用して反応すると、次のようなファイルをインポートできます。

import(`src/Main.sass`).then(...do something)

クエリ文字列に基づいてモジュールのコンテンツを変更するインポートされたファイルのローダーがあり、次のようにファイルを正常にインポートできます。

import(`src/Main.sass?theme=themename`).then(...do something)

ただし、クエリ文字列が変数の場合：

const themeQuery = '?theme=themename';
import(`src/Main.sass${themeQuery}`).then(...do something);

または

const theme = 'themename';
import(`src/Main.sass?theme=${theme}`).then(...do something);

エラーが発生します：

Error: Cannot find module '.src/Main.sass?theme=themename'.

私はこれが情報に基づいて機能することを期待します ここ ：

Import（foo）などの完全に動的なステートメントは、webpackが少なくともいくつかのファイルの場所情報を必要とするため失敗します。これは、fooがシステムまたはプロジェクト内の任意のファイルへのパスになる可能性があるためです。 import（）には、モジュールの場所に関する少なくともいくつかの情報が含まれている必要があるため、バンドルは特定のディレクトリまたはファイルセットに制限できます。

そして

Import（）コールで要求される可能性のあるすべてのモジュールが含まれています。たとえば、import（./locale/${language}.json）は、。/ localeディレクトリ内のすべての.jsonファイルを新しいチャンクにバンドルします。実行時に可変言語が計算されると、english.jsonやgerman.jsonなどのファイルを使用できます。

これは完全に動的なステートメントではなく、クエリ文字列に問題なくインポートできる完全なファイルパス（場所情報）が含まれています。

編集： これを再現できるテストリポジトリ を作成しました。 src/Main.jsは、themeNameで定義されたクエリ文字列でMain.component.sassをインポートします。このコンポーネントを<Main/>のsrc/App.jsとして使用すると、Cannot find module './Main.module.sass?theme=themename' error.が表示されますが、クエリを含む完全な文字列を使用してインポートすると、ファイルは問題なくインポートされます。これは、src/Main-no-var.jsを<Main>コンポーネントとして使用することで確認できます。

この例で使用する webpack config は次のとおりです。

javascriptreactjswebpackimportecmascript-6
13
CLL

ドキュメントのこの部分を見ると

たとえば、import（./ locale/$ {language} .json）は、。/ localeディレクトリ内のすべての.jsonファイルを新しいチャンクにバンドルします。実行時に可変言語が計算されると、english.jsonやgerman.jsonなどのファイルを使用できます。

これは、静的分析が_.json_フォルダー内のすべての_./locale/_ファイルを検索してバンドルすることを意味し、可能なすべてのターゲットを認識します。 _query string_を使用すると、_query string_は何でもかまいません。したがって、何をバンドルするかを知ることができないため、基本的には可能なターゲットの数は無制限になります。

これは、現在のimport()ステートメントで明らかにサポートされていない_dynamic path_解決とはまったく異なる機能だと思います。

あなたの最善の策は、テーマごとに複数の_.css_ファイルが含まれるようにフォルダー構造を変更し、ドキュメント（言語の例）で提案されているように_dynamic path_を使用してロードするか、次のようなことを行うことです

_const themes = {
  "themename": () => import(
    `./Main.module.css?theme=themename`
  ),
  // other themes
}
_

このようにして、propに渡すことができるすべての可能なテーマを示すよりクリーンなコードを作成し（静的分析は_query string_が何であるかを正確に知っているため、機能します）、それを使用しますそのようです

_componentDidMount = () => {
    const { themeName } = this.props
    themes[themeName]().then((result) => {
      this.setState({ theme: result })
    })
}
_

私はむしろあなたが示唆したようにクエリ文字列の実装を望んでいますが、今のところ、私が調査した限りではそれは不可能です。

1
zhuber