Implementierungsschritte zum Einrichten der React+Ant Design-Entwicklungsumgebung

Grundlagen

1. Verwenden Sie Scaffolding, um ein Projekt zu erstellen und zu starten

1.1 Gerüst montieren:

npm install -g Erstellen-Reagieren-App

1.2 Erstellen Sie ein Projekt mithilfe von Scaffolding:

Erstellen-Reagieren-App Antd-Start-Demo

antd-start-demo ist der Projektname.

1.3 Inbetriebnahme

npm starten

2. Konvertieren Sie npm in yarn

2.1 Garn installieren:

npm install -g Garn

​ 2.2 Holen Sie sich die aktuelle Bildquelle von yarn:

Garnkonfiguration, Registrierung abrufen

2.3 Als Taobao-Spiegel einrichten:

Garnkonfigurationssatz-Registrierung „https://registry.npm.taobao.org“

2.4 Allgemeine Befehle:

yarn init --initialisieren yarn add --Modul hinzufügen yarn remove --Modul entfernen yarn /yarn install --Abhängigkeiten im Projekt installieren

Projektkonstruktion

2.1 Installieren Sie react-router 4.0, axios, less-loader

Garn hinzufügen React-Router-Dom Axios Less-Loader

2.2 Offenlegen der Webpack-Konfiguration

Garnauswurf

Tipp: Wenn Sie yarn eject ausführen und eine Fehlermeldung erhalten

Nachdem wir die Datei geändert haben, wird der obige Fehler gemeldet, wenn wir den Befehl yarn eject verwenden. Dies liegt daran, dass beim Erstellen des Projekts mithilfe des Gerüsts die Datei .gitignore automatisch hinzugefügt wurde, wir jedoch kein lokales Lager haben. Führen Sie zu diesem Zeitpunkt einfach den folgenden Befehl aus, um das Projekt zu unserem lokalen Lager hinzuzufügen, und führen Sie ihn dann aus.
Lösung:

git add.
git commit -m 'init'
Garnauswurf

Führen Sie dann yarn eject aus.

Webpack-Konfiguration

2.3 Less-Loader konfigurieren

​ Antd wurde auf der Grundlage von Less entwickelt. Wir können Less verwenden, um die Designfarbe und andere Konfigurationen einfach zu ändern.

Installieren Sie das Less-Modul: yarn add less@2.7.3

​ Öffnen Sie config/webpack.config.dev.js und fügen Sie die folgende Konfiguration hinzu:

{
      Test: /\.less$/,
      verwenden: [
       erfordern.auflösen('Stil-Loader'),
       {
        Lader: require.resolve('css-loader'),
        Optionen: { importLoaders: 1 },
       },
       {
        // Optionen für PostCSS, da wir diese Optionen zweimal referenzieren
        // Fügt Vendor-Präfixe basierend auf der von Ihnen angegebenen Browserunterstützung hinzu in
        // paket.json
        Lader: require.resolve('postcss-loader'),
        Optionen:
         // Notwendig, damit externe CSS-Importe funktionieren
         // https://github.com/facebook/create-react-app/issues/2677
         Kennung: 'postcss',
         Plugins: () => [
          erfordern('postcss-flexbugs-fixes'),
          erfordern('postcss-preset-env')({
           Autopräfix: {
            Flexbox: "Nr. 2009",
           },
           Stufe: 3,
          }),
         ],
        },
       },
       { loader: erfordern.auflösen('less-loader') }
      ],
},

So konfigurieren Sie CSSLoad auf derselben Ebene wie in der Abbildung gezeigt

Bildbeispiel Hinweis: Der in webpack.config.dev.js hinzugefügte Konfigurationsteil muss auch in webpack.config.prod.js konfiguriert werden. Andernfalls kann es nach der Freigabe des Projekts zu einem Fehler kommen und das Programm kann nicht ausgeführt werden.

2.4 Installieren Sie antd

Garn hinzufügen antd

2.5 Testeinsatz

importiere { Button } von "antd";
importiere „antd/dist/antd.css“;

...
 rendern() {
  zurückkehren (
   <div>
     <Button>Klick</Button>
   </div>
  );
 }
...

Hinweis: Standardmäßig muss das installierte Antd antd/dist/antd.css importieren, damit der Stil wirksam wird. In vielen Fällen verwenden wir jedoch nur einige Komponenten und importieren die gesamte Antd-Stildatei, was den Verlust nicht wert ist. So entstand das Laden auf Abruf.

2.6 Antd On-Demand-Laden
1. Fügen Sie babel-plugin-import hinzu,

Garn fügt Babel-Plugin-Import hinzu

2. Öffnen Sie die Webpack-Konfiguration und suchen Sie: JS mit Babel

Suchen Sie nach der folgenden Konfiguration:

// Anwendungs-JS mit Babel verarbeiten.
     // Die Voreinstellung umfasst JSX, Flow, TypeScript und einige ESnext-Funktionen.
     {
      Test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,

      Lader: require.resolve('babel-loader'),
      Optionen:
       anpassen: require.resolve(
        „Babel-Vorgabe-React-App/Webpack-Overrides“
       ),
       
       Plugins: [
        [
         erfordern.lösen('babel-plugin-named-asset-import'),
         {
          LaderMap: {
           svg: {
            ReactComponent: '@svgr/webpack?-prettier,-svgo![Pfad]',
           },
          },
         },
        ],
       ],
       cacheDirectory: true,
       // Sparen Sie Speicherplatz, wenn die Zeit nicht so wichtig ist
       cacheCompression: wahr,
       kompakt: wahr,
      },
     },

Ändern Sie das Plugin und fügen Sie hinzu:

["import", { "Bibliotheksname": "antd", "Stil": true }]

An dieser Stelle können Sie die Einführung der CSS-Datei abbrechen. Babel lädt standardmäßig automatisch das entsprechende CSS basierend auf der eingeführten Komponente.

2.7 Ändern der Designfarbe

 {
        Lader: require.resolve('less-loader'),
        Optionen:
         Module: falsch,
         Variablen ändern: {
          "@Primärfarbe": "#f9c700"
         }
        }
       }

Sie können es in der Less-Konfiguration in Webpack ändern. @primary-color ist eine integrierte Less-Variable von antd. Sie müssen nur die Standardkonfiguration überschreiben, um die Designfarbe zu ändern.

Hinweis: Beim Ausführen von yarn run start wird ein Fehler gemeldet ValidationError: Ungültiges Optionsobjekt. Less Loader wurde mit einem Optionsobjekt initialisiert

Lösung: Deinstallieren Sie less-loader und installieren Sie less-loader@5.0.0

Garn entfernen Less-Loader
Garn fügt less-loader@5.0.0 hinzu

Dies ist das Ende dieses Artikels über die Implementierungsschritte zum Einrichten der React+Ant Design-Entwicklungsumgebung. Weitere relevante Inhalte zur React Ant Design-Konstruktion finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!