Reactでファイルパスのエイリアスを設定する具体的な方法をご存知ですか？

記事環境:

"react": "^16.13.1" バージョン

学習ビデオ共有:react ビデオ チュートリアル

React 公式スキャフォールディングはデフォルトで Webpack 設定を非表示にします。Webpack は設定前に公開する必要があります。

1. コマンド npm run eject

# を入力すると、コマンド プロンプトが表示されます: これは一方向の操作であり、元に戻すことはできません。操作を確認したら?

y を入力して Enter を押します

##成功すると、プロジェクトのルート ディレクトリに config フォルダーが表示されます

## 2. config フォルダーの下にある webpack を開きます config.js ファイル

#3. おそらく行 291

でエイリアスを検索します##次の形式を参照してください。パス エイリアス

	alias: {
        // Support react Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with reactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 文件路径别名
        '@': path.resolve(__dirname, '../src'),
        '@view': path.resolve(__dirname, '../src/view'),
      },

を設定するときは、特別な注意を払う必要があります。Webpack 構成を変更した後は、プロジェクトを再起動する必要があります。そうしないと有効になりません。

5.

を使用してプロジェクトindex.jsで開き、import ./index.cssをimport '@/index.css'に置き換えます

注: @が設定されています上記の src ファイル パス

6. プロジェクトを開始すると、エラーは報告されず、スタイルが有効になります

以上がReactでファイルパスのエイリアスを設定する具体的な方法をご存知ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。