eject を使用せずに create-react-app の設定を変更する方法

1. イジェクトが推奨されないのはなぜですか?

1. eject を実行した後、どのような変化がありましたか?

create-react-app フレームワーク自体は、webpack や babel の関連設定を react-scripts にカプセル化します。yarneject を実行すると、webpack、babel などの設定が config ディレクトリに公開されます。同時に、scripts ディレクトリに新しいコマンドファイルが更新され、package.json ファイル内の scripts コマンドも同期的に更新されます。

2. eject を実行するとどのような問題が発生しますか?

まず、eject の実行は不可逆であり、webpack などの複雑な設定はフレームワーク自体からユーザーに引き継がれてメンテナンスされます。

次に、バージョン反復中に react、react-scripts、eslint、tsconfig などの依存関係が更新されると、バージョン依存関係の問題が発生する可能性があります。エラーメッセージに従って修正しても、プロジェクトは実行できません。

したがって、通常、yarneject を使用して create-react-app フレームワークの構成を公開することはお勧めしません。

2. ニーズを解決する方法

実際の開発では、webpack と babel の設定を更新する必要があります。たとえば、次のようになります。

antd のオンデマンドロード。
CSS プリプロセッサを設定します - less;
エイリアスと外部を設定します。
実稼働環境のパッケージ化 - console.log とデバッガーを削除します。
パッケージング結果の最適化分析。
パッケージ化中に進行状況バーのプロンプトを追加します。

高エネルギー警告が先にあります〜

yarn add react-app-rewired customize-c を実行して設定拡張を完了します。

ここがポイントです、忘れずにテストを受けてください〜

これらを 1 つずつ達成するために、いくつかのステップに分けます。

依存関係をダウンロードしてインストールする

yarn react-app-rewired をカスタマイズ cra -D に追加します

現在使用されているバージョンは react-app-rewired@^2.1.8、customize-cra@^1.0.0 です。

package.json を構成するためのコマンド

「スクリプト」: {
- "start": "react-scripts start",
+ "開始": "react-app-rewired 開始",
- "ビルド": "react-scriptsビルド",
+ "ビルド": "react-app-rewired ビルド",
}

ルートディレクトリのconfig-overrides.jsファイルを設定します。

モジュール.エクスポート = {}

基本的な設定が完了したら、config-overrides.js で詳細な設定を実行して、上記の要件を解決します。

1. antdのオンデマンドロード

依存関係をインストールします:

糸を追加 antd -D

構成

コスト { override, fixBabelImports } = require('customize-cra');
モジュール.エクスポート = オーバーライド(
	BabelImportsを修正
  	"輸入"、
    {
      "ライブラリ名": "antd",
      "ライブラリディレクトリ": "es",
      "スタイル": "css"
    }
  ）

2. CSSプリプロセッサを設定する - less

ここで less だけが強調されているのはなぜでしょうか? create-react-app には sass/scss プリプロセッサが組み込まれており、使用時に関連する依存関係のみをインストールする必要があるためです (実行時に、プロンプトに従って不足しているパッケージをインストールするだけです)。

糸にsassを追加 -D

次に、lessがどのようにサポートしているかを見てみましょう

インストールの依存関係:

糸を追加 less less-loader@7.3.0 -D

ここでの less-loader のバージョンは less-loader@7.3.0 であることに注意してください。これが最新バージョンだと、上記の react-app-rewired および customize-cra バージョンで設定する際に問題が発生するため、下位バージョンが使用されます。

less-loader の最新バージョンは、実際には webpack@5.0 で使用するように設計されています。

構成

const { override、addLessLoader } = require('customize-cra');
モジュール.エクスポート = オーバーライド(
レスローダーを追加します({
// ここで他の less 設定を追加できます lessOptions: {
   	//必要に応じて設定してください〜
    }
})
);

3. エイリアスと外部を設定します。

const { override、addWebpackAlias } = require('customize-cra');
定数パス = require('path');
モジュール.エクスポート = オーバーライド(
  // エイリアス
WebpackAliasを追加します({
    // モジュールをロードするときに、省略形として「@」記号を使用できます~
    '@': パスを解決します(__dirname, './src/')
  }）、
  // 外部
  WebpackExternalsを追加します({
    // public/index.html で紹介されている jQuery の対応するリモート ファイル アドレスに注意してください "jQuery": "jQuery"
  })

4. 実稼働環境のパッケージ化 - console.log とデバッガーを削除します。

依存関係をインストールする

yarnadduglifyjs-webpack-プラグイン-D

構成

const { override、addWebpackPlugin } = require('customize-cra');
定数 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	// プラグインは本番環境で起動されることに注意してください
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	新しいUglifyJsPlugin({
  		// パッケージキャッシュを有効にする cache: true,
  		// マルチスレッドパッケージングを有効にする parallel: true,
  		醜いオプション: {
  			// 警告を削除する warnings: false,
  			//圧縮 圧縮: {
  				// コンソールを削除する
  				drop_console: true、
  				// デバッガーを削除する
  				ドロップデバッガー: true
  			}
  		}
  	})
  ）

5. パッケージング結果の最適化分析。

依存関係をインストールする

yarn に webpack-bundle-analyzer のクロス環境を追加します -D

cross-envは環境変数を設定するために使用されます

構成

// package.json ファイル "scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" }

// config-overrides.js
const { override、addWebpackPlugin } = require('customize-cra');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
モジュール.エクスポート = オーバーライド(
  // 環境変数ANALYZERパラメータの値を決定する process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
）

6. パッケージ化中に進行状況バープロンプトを追加します。

依存関係をインストールする

yarnaddprogress-bar-webpack-プラグイン-D

const { override、addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	Webpackプラグインを追加します(新しいProgressBarPlugin())
）

上記はいくつかの要件を実装した構成です。完全な config-overrides.js ファイルを見てみましょう。

// config-overrides.js
コスト { override、fixBabelImports、addWebpackPlugin、addLessLoader、addWebpackAlias、addWebpackExternals } = require('customize-cra');
定数パス = require('path');
定数 UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
モジュール.エクスポート = オーバーライド(
	BabelImportsを修正
  	"輸入"、
    {
			"ライブラリ名": "antd",
      "ライブラリディレクトリ": "es",
      "スタイル": "css"
    }
  ）、
  レスローダーを追加します({
		// ここで他の less 設定を追加できます lessOptions: {
   		//必要に応じて設定してください〜
    }
	}）、
  // エイリアス
	WebpackAliasを追加します({
    // モジュールをロードするときに、省略形として「@」記号を使用できます~
    '@': パスを解決します(__dirname, './src/')
  }）、
  // 外部
  WebpackExternalsを追加します({
    // public/index.html で紹介されている jQuery の対応するリモート ファイル アドレスに注意してください "jQuery": "jQuery"
  }）、
  // プラグインは本番環境で起動されることに注意してください
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	新しいUglifyJsPlugin({
  		// パッケージキャッシュを有効にする cache: true,
  		// マルチスレッドパッケージングを有効にする parallel: true,
  		醜いオプション: {
  			// 警告を削除する warnings: false,
  			//圧縮 圧縮: {
  				// コンソールを削除する
  				drop_console: true、
  				// デバッガーを削除する
  				ドロップデバッガー: true
  			}
  		}
  	})
  ）、
  // 環境変数のANALYZERパラメータの値を決定します。process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  Webpackプラグインを追加します(新しいProgressBarPlugin())
）

eject を使わずに create-react-app の設定を変更する方法についてはこれで終わりです。create-react-app の設定変更の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: