So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden

1. Warum wird das Auswerfen nicht empfohlen?

1. Welche Änderungen sind nach der Ausführung von „eject“ aufgetreten?

Das Framework create-react-app selbst kapselt die relevanten Konfigurationen von webpack und babel in react-scripts. Nach der Ausführung von yarneject werden die Konfigurationen von webpack, babel usw. im Konfigurationsverzeichnis angezeigt. Gleichzeitig werden neue Befehlsdateien im Skriptverzeichnis aktualisiert und die Skriptbefehle in der Datei package.json werden synchron aktualisiert.

2. Welche Probleme bringt die Ausführung von eject mit sich?

Erstens ist die Ausführung von Eject irreversibel und komplexe Konfigurationen wie Webpack werden vom Framework selbst zur Wartung an den Benutzer übergeben.

Zweitens können während der Versionsiteration Versionsabhängigkeitsprobleme auftreten, wenn Abhängigkeiten wie React, React-Scripts, Eslint, TSConfig usw. aktualisiert werden. Selbst wenn wir sie gemäß der Fehlermeldung beheben, kann das Projekt trotzdem nicht ausgeführt werden.

Daher empfehlen wir im Allgemeinen nicht, yarneject zu verwenden, um die Konfiguration des Create-React-App-Frameworks verfügbar zu machen.

2. Wie man die Bedürfnisse löst

In der eigentlichen Entwicklung müssen wir beispielsweise noch die Konfiguration von Webpack und Babel aktualisieren:

• Laden von Antd bei Bedarf;
• Konfigurieren Sie den CSS-Präprozessor – weniger;
• Legen Sie Aliase und externe Namen fest.
• Verpackung der Produktionsumgebung – Console.log und Debugger entfernen;
• Analyse der Verpackungsergebnisoptimierung;
• Fügen Sie während der Verpackung eine Fortschrittsanzeige hinzu;

Warnung vor hoher Energie ~

yarn add react-app-rewired customize-c um die Konfigurationserweiterung abzuschließen~

Hier ist der entscheidende Punkt: Denken Sie daran, den Test zu machen ~

Wir unterteilen es in mehrere Schritte, um diese nacheinander zu erreichen:

Herunterladen und Installieren von Abhängigkeiten

Garn hinzufügen reagieren-App-neu verdrahtet anpassen-cra -D

Die derzeit verwendeten Versionen sind react-app-rewired@^2.1.8、customize-cra@^1.0.0

Befehle zum Konfigurieren von package.json

"Skripte": {
- "start": "React-Scripts starten",
+ "Start": "React-App-Rewired-Start",
- "build": "React-Scripts erstellen",
+ "Build": "React-App-Rewired-Build",
}

Konfigurieren Sie die Datei config-overrides.js im Stammverzeichnis

modul.exports = {}

Nachdem wir die Grundkonfiguration abgeschlossen haben, führen wir eine detaillierte Konfiguration in config-overrides.js durch, um unsere oben genannten Anforderungen zu erfüllen.

1. Laden von antd bei Bedarf

Installieren Sie Abhängigkeiten:

Garn hinzufügen antd -D

Konfiguration

cosnt { override, fixBabelImports } = erfordern('customize-cra');
modul.exporte = überschreiben(
	FixBabelImports
  	"Import",
    {
      "Bibliotheksname": "antd",
      "libraryDirectory": "es",
      "Stil": "css"
    }
  )

2. Konfigurieren Sie den CSS-Präprozessor - weniger

Warum wird hier nur „less“ betont? Weil create-react-app über integrierte Sass/Scss-Präprozessoren verfügt und Sie bei der Verwendung nur die zugehörigen Abhängigkeiten installieren müssen (beim Ausführen installieren Sie einfach die fehlenden Pakete gemäß den Eingabeaufforderungen).

Garn hinzufügen Sass -D

Als nächstes schauen wir uns an, wie weniger unterstützt

Installationsabhängigkeiten:

Garn hinzufügen weniger [email protected] -D

Beachten Sie, dass die Version von Less-Loader hier [email protected] ist. Wenn es die neueste Version ist, treten bei der Konfiguration mit den oben genannten React-App-Rewired- und Customize-CRA-Versionen Probleme auf, sodass die niedrigere Version verwendet wird.

Die neueste Version von Less-Loader ist eigentlich für die Verwendung mit [email protected] konzipiert.

Konfiguration

const { override, addLessLoader } = erfordern('customize-cra');
modul.exporte = überschreiben(
addLessLoader({
// Sie können hier andere Less-Konfigurationen hinzufügen lessOptions: {
   	//Konfigurieren Sie nach Ihren Bedürfnissen~
    }
})
);

3. Legen Sie Aliase und externe Namen fest.

const { override, addWebpackAlias ​​​​} = require('customize-cra');
const path = require('Pfad');
modul.exporte = überschreiben(
  // Alias
addWebpackAlias({
    // Beim Laden eines Moduls können Sie das Symbol "@" zur Abkürzung verwenden~
    '@': Pfad.auflösen(__dirname, './src/')
  }),
  // Äußerlichkeiten
  addWebpackExternals({
    // Beachten Sie die entsprechende Remote-Dateiadresse von jQuery, die in public/index.html "jQuery": "jQuery" eingeführt wurde.
  })

4. Verpackung der Produktionsumgebung – console.log und Debugger entfernen;

Abhängigkeiten installieren

yarnadduglifyjs-webpack-plugin-D

Konfiguration

const { override, addWebpackPlugin } = erfordern('customize-cra');
const UglifyJsPlugin = erfordern('uglifyjs-webpack-plugin');
modul.exporte = überschreiben(
	// Beachten Sie, dass das Plugin in der Produktionsumgebung gestartet wird
	process.env.NODE_ENV === 'Produktion' und addWebpackPlugin(
  	neues UglifyJsPlugin({
  		// Paket-Cache aktivieren cache: true,
  		// Multithread-Paketierung parallel aktivieren: true,
  		hässlicheOptionen: {
  			// Warnungen löschen warnings: false,
  			//Komprimierung compress: {
  				//Entfernen Sie die Konsole
  				drop_console: wahr,
  				// Den Debugger entfernen
  				drop_debugger: wahr
  			}
  		}
  	})
  )

5. Analyse der Verpackungsergebnisoptimierung;

Abhängigkeiten installieren

Garn fügt Webpack-Bundle-Analyzer Cross-Env hinzu -D

cross-env wird zum Konfigurieren von Umgebungsvariablen verwendet

Konfiguration

// package.json-Datei „scripts“: { „build:analyzer“: „cross-env ANALYZER=true react-app-rewired build“ }

// config-overrides.js
const { override, addWebpackPlugin } = erfordern('customize-cra');
const { BundleAnalyzerPlugin } = erfordern('webpack-bundle-analyzer');
modul.exporte = überschreiben(
  // Bestimmen Sie den Wert der Umgebungsvariablen ANALYZER-Parameter process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
)

6. Fügen Sie während der Verpackung eine Fortschrittsanzeige hinzu.

Abhängigkeiten installieren

yarnaddFortschrittsbalken-Webpack-Plugin-D

const { override, addWebpackPlugin } = erfordern('customize-cra');
const ProgressBarPlugin = erforderlich('Fortschrittsbalken-Webpack-Plugin');
modul.exporte = überschreiben(
	addWebpackPlugin(neues ProgressBarPlugin())
)

Oben sehen Sie die Konfiguration, in der wir mehrere Anforderungen implementiert haben. Werfen wir einen Blick auf die vollständige Datei config-overrides.js.

// config-overrides.js
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = erfordern('customize-cra');
const path = require('Pfad');
const UglifyJsPlugin = erfordern('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = erfordern('webpack-bundle-analyzer');
const ProgressBarPlugin = erforderlich('Fortschrittsbalken-Webpack-Plugin');
modul.exporte = überschreiben(
	FixBabelImports
  	"Import",
    {
			"Bibliotheksname": "antd",
      "libraryDirectory": "es",
      "Stil": "css"
    }
  ),
  addLessLoader({
		// Sie können hier andere Less-Konfigurationen hinzufügen lessOptions: {
   		//Konfigurieren Sie nach Ihren Bedürfnissen~
    }
	}),
  // Alias
	addWebpackAlias({
    // Beim Laden eines Moduls können Sie das Symbol "@" zur Abkürzung verwenden~
    '@': Pfad.auflösen(__dirname, './src/')
  }),
  // Äußerlichkeiten
  addWebpackExternals({
    // Beachten Sie die entsprechende Remote-Dateiadresse von jQuery, die in public/index.html "jQuery": "jQuery" eingeführt wurde.
  }),
  // Beachten Sie, dass das Plugin in der Produktionsumgebung gestartet wird
	process.env.NODE_ENV === 'Produktion' und addWebpackPlugin(
  	neues UglifyJsPlugin({
  		// Paket-Cache aktivieren cache: true,
  		// Multithread-Paketierung parallel aktivieren: true,
  		hässlicheOptionen: {
  			// Warnungen löschen warnings: false,
  			//Komprimierung compress: {
  				//Entferne die Konsole
  				drop_console: wahr,
  				//Entfernen Sie den Debugger
  				drop_debugger: wahr
  			}
  		}
  	})
  ),
  // Bestimme den Wert des ANALYZER-Parameters der Umgebungsvariable process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(neues ProgressBarPlugin())
)

Dies ist das Ende dieses Artikels zum Ändern der Konfiguration von create-react-app ohne Verwendung von eject. Weitere Informationen zum Ändern der Konfiguration von create-react-app finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!