web-dev-qa-db-ja.com

Reactの画像に「importfrom」ではなく「require」を使用する必要があるのはなぜですか？

この回答 は、以下に示すように画像をインポートするための構文を示唆していることがわかります（コメントアウト）。私の場合、それはうまくいきませんでした（そのファイルにモジュールが見つからないと不平を言っています）、そして私は現在アクティブな構文に切り替える必要がありました。

// import Author from "../assets/author.png";
var Author = require("../assets/author.png");

私が想像できる違いは、TypeScriptを使用していることです（TSXをawesome-TypeScript-loaderでトランスパイルし、PNGfile-loader）そして彼らはJSXを使用しているようです。しかし、私の理解では、すべてがプレーンなJSに変換され、最終的にrequireになります。

Reactの初心者なので、この不一致の理由がわからないだけでなく自分自身を調査するためにグーグルで何を探すべきかわからない。

reactjstypescriptwebpackwebpack-4
11
DonkeyBanana

次のように、画像のモジュールを宣言できます。

declare module "*.png" {
  const value: any;
  export default value;
}

次に、次のように画像をインポートできます。

import AuthorSrc from "../assets/author.png";

これは、webpackがそのままの画像のインポートをサポートしていないために発生しています。そのため、webpack設定ファイルにそのルールを追加する必要があります。新しいルールを追加しても、TypeScriptはそれを自動的に認識しないため、これを解決するには新しいモジュールを宣言する必要があります。モジュールがないと、画像をインポートできますが、可能であると言わなかったため、TypeScriptはエラーをスローします。

1
Vincent D'amour

これは、webpack自体よりもTypeScriptの問題であり、宣言ファイルでモジュールを宣言する必要がある場合があります。

declarations.d.tsを作成します

Tsconfig.jsonを更新します

"include": [
    "./declarations.d.ts",
],

これをそのファイルに入れてください：

declare module '*.png';

エラーがなくなった可能性があります。

5
PlayMa256

この問題はwebpackやバンドラーとは何の関係もなく、TypeScriptではそれほど問題にはなりません。

TypeScriptは、 `require（" path "）は現在のモジュールのスコープにモジュールを含める方法であると述べていますが、いくつかのランダムファイル（jsonファイルなど）の読み取りにも使用できます。

VincentとPlayma256が指定したように、特定のファイルタイプに一致するようにモジュールワイルドカードを宣言できるため、インポートステートメントとしてインポートできます。しかし、実際にこれを行う必要はありません。 pngまたはjsonファイルをインポートしようとしてもTypeScriptでエラーが発生することはありません（tslintの場合もありますが、構成によって異なります）。

ちなみに、宣言がtsconfig.jsonで定義されているプロジェクトのソースフォルダー内にある場合は、Playma256で指定されているように宣言を含める必要はありません。

テスト用にノードにサンプルプロジェクトを作成しました。

https://github.com/rodrigoelp/TypeScript-declare-files

1
rodrigoelp

この問題はWebpack && TypeScriptで解決できると思います。webpackの公式ウェブページでhttps://webpack.js.org/guides/TypeScript/でこれについて何か紹介されています。https://github.com/reactpersopnal/webpack-root/tree/feature/TypeScriptで自分で試してみました。理由は非コードを使用したいからです。 TypeScriptを使用するアセットなので、webpackのこれらのインポートのタイプを延期する必要があります。 custom.d.tsを追加するだけです。

declare module "*.jpg" {
    const content: any;
    export default content;
}
1
Root