今日@svgr/webpackが遭遇した落とし穴について話しましょう

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して8日目です。クリックしてイベントの詳細を表示。

問題のシナリオ

最近は嫌なことをして、プロジェクトAとプロジェクトBを統合し、プロジェクトAをライブとして、Bをマージのバイスとして使用しています。

プロジェクトBでは、 imgがsvg画像を導入する場所がたくさんありますが、プロジェクトAのsvgはコンポーネントの形で導入されるため、以前の方法のsvgは表示できません。次の図は、プロジェクトAのsvg構成です。

{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    issuer: /\.([jt])sx?$/,
    use: ['@svgr/webpack'],
},

复制代码

2.問題のシミュレーション

ここcreate-react-appで、自分でプロジェクトを作成し、それを実行npm run ejectしてWebpack構成を公開します。svgの関連する構成は次のとおりです。

{
  test: /\.svg$/,
  use: [
    {
      loader: require.resolve('@svgr/webpack'),
      options: {
        prettier: false,
        svgo: false,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
        ref: true,
      },
    },
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
  ],
  issuer: {
    and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
  },
},
复制代码

次に、コンポーネントにsvgイメージを導入します。

import React from 'react';
import LogoUrl from './logo.svg'

const App = () => {
  console.log(1111, LogoUrl)
  console.log(2323, require('./logo.svg'))
  return (
      <div>
        <img src={require('./logo.svg').default} width={40} height={40} alt="" />
        <img src={LogoUrl} alt="" />
      </div>
  )
}
export default App;
复制代码

私が印刷したものに注意を払うことができます。ここでは問題はないはずです。次に、プロジェクトAと同じになるようにwebpack構成を変更します。再起動して、ページをもう一度見るとどうなりますか？ 現在、写真は表示できません〜

コンポーネントモードで導入するように変更します。

import React from 'react';
import LogoUrl from './logo.svg'

+ import Logo from './logo.svg'

const App = () => {
  console.log(1111, LogoUrl)
  console.log(2323, require('./logo.svg'))
  return (
      <div>
        <img src={require('./logo.svg').default} width={40} height={40} alt="" />
        <img src={LogoUrl} alt="" />
+        <Logo />
      </div>
  )
}
export default App;
复制代码

ここで、私が遭遇した問題をシミュレートします。プロジェクトBでimgが導入された方法を表示できません〜

3.問題を解決します

SVGRは、SVGをReactコンポーネントに変換するための汎用ツールです。

ここで必要なのは、SVGの一部を静的リソースのURLとして、一部をReactコンポーネントとして持つことです。公式に最も簡単な方法は、2つのタイプのいずれかをresourceQuery使用することです。

{
    test: /\.svg$/i,
    type: 'asset',
    resourceQuery: /url/, // *.svg?url
},
{
    test: /\.svg$/i,
    issuer: /\.[jt]sx?$/,
    resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
    use: ['@svgr/webpack'],
},
复制代码

あなたはそれが何であるかを尋ねるかもしれませんresourceQuery、あなたはそれを自分で見つけることができます。ここで簡単に説明しましょう。たとえば、上記の構成で、svgイメージを×××.svg？urlの形式でインポートすると、インポートによってインポートするモジュールパラメーターが要件を満たし、次の方法でインポートできます。 imgショー。

コードを変更します。

import React from 'react';
import LogoUrl from './logo.svg?url'
import Logo from './logo.svg'

const App = () => {
  return (
      <div>
        <img src={LogoUrl} alt="" width={40} height={40} />
        <Logo width="140" height="140" />
      </div>
  )
}
export default App;
复制代码

終わった、花を広げて〜