Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung

Neues Projekt starten

Dieser Artikel zeichnet hauptsächlich den Arbeitsprozess an einem neuen Projekt von 0 bis 1 auf und zeichnet hauptsächlich drei Knoten auf: Auswahl, Laufzeit und Start.

Projektauswahl

Initialisierung des React-Gerüsts. In der Community sind cra (create-react-app) und umi beliebter. Nach dem Vergleich der folgenden Punkte haben wir uns schließlich für umi entschieden, das für das Projekt besser geeignet ist.

1. Sofort einsatzbereit, einfach zu bedienen. Umi hat viele integrierte Funktionen, bringt aber auch viele Einschränkungen mit sich. Beispielsweise erfordern die Anforderungen an die Projektstruktur und die Plug-Ins für das eigene Ökosystem Lernkosten. Bei der Cra-Initialisierung wird einfach eine Vorlage zum Starten ausgewählt, und es sind keine zusätzlichen Lernkosten erforderlich (selbst wenn Vue-Player hinzukommen, entsteht keine Belastung).
2. Skalierbarkeit, Webpack-Konfiguration ändern. cra bietet Auswerfen (irreversibler Vorgang), das vollständig von Ihnen selbst offengelegt und gesteuert wird, wodurch die ursprüngliche Absicht einer einfachen Konfiguration am Anfang verloren geht. Sie können auch react-app-rewired und customize-cra verwenden, wie hier gezeigt. Wenn umi die Webpack-Konfiguration ändern muss, kann es Dateien direkt schreiben (basierend auf der Webpack-Kette) und bietet auch eine laufende Konfiguration.
3. Ökosystem, umi ist Open Source von Alibaba und enthält viele Plug-Ins, die mit ihrer Open Source verwandt sind, wie das beliebte Antd und Qiankun. Die offizielle Website bietet viele praktische Anleitungen und ist in chinesischen Dokumenten verfasst (manche Leute bevorzugen dies). CRA ist prägnant und nur für eine Gerüstarbeit verantwortlich (die interne Implementierung ist leicht zu verstehen und Probleme können schnell lokalisiert und gelöst werden).

Angesichts der Tatsache, dass ein Projekt schnell erstellt werden muss und die Unterstützung vieler ausgereifter Plug-Ins erfordert, wurde umi übernommen. antd ist so gut! ! ! @umijs/plugin-model, ich empfehle dieses Plugin. Wenn Sie die internen Abläufe verstehen, beherrschen Sie das Datenmanagement im Grunde.

Laufzeit

Umi stellt app.ts bereit, eine Laufzeitkonfigurationsdatei, die die Fähigkeiten der Laufzeit erweitern kann. Einfach ausgedrückt können hier alle Voroperationen zum Rendern Ihrer Seite platziert werden. Dieses Konzept kann unterteilt werden in

Im Vergleich zu Storybook (preview.js) können Sie das Skript in das entsprechende HTML einfügen, wenn Sie es selbst implementieren möchten. Hier wird es einige projektbezogene Inhalte geben. Da das Projekt in ein bestehendes Projekt eingebettet werden muss, verwenden wir den Iframe-Ansatz. Unweigerlich sind Kommunikation und Anpassung der Iframe-Größe erforderlich.

Für die Iframe-Kommunikation wird window.postmessage verwendet, da die Domänen unterschiedlich sind. Um die Lesbarkeit der Daten aufrechtzuerhalten, wird empfohlen, den entsprechenden Ereignisübertragungsinhalt zu definieren, um erhöhte Schwierigkeiten bei der späteren Wartung zu vermeiden. Wenn häufige Kommunikation erforderlich ist, wird empfohlen, eine Micro-Frontend-Lösung zu übernehmen.

Iframe-Anpassung, das Iframe-Resizer-Plug-In hilft uns, dieses Problem zu lösen. Denken Sie daran, dass sowohl die Einbettung als auch das eingebettete Element installiert werden müssen, da sie sonst nicht kommunizieren und sich anpassen können. Hier liegt ein Problem vor. Wenn die Seite eingebettet ist, kann der Body-Knoten nicht von innen erweitert werden. Daher muss die benutzerdefinierte Berechnungsmethode von iframe-resizer verwendet werden, um die entsprechende Methode auf der untergeordneten Seite bereitzustellen. Der Code lautet wie folgt:

Teilsystem

importiere „iframe-resizer/js/iframeResizer.contentWindow.js“;
// Falls eingebettet, öffne den Listener zur Laufzeit const iframeInit = () => {
 wenn (übergeordnetes !== Fenster) {
  (Fenster wie jedes).iFrameResizer = {
   Höhenberechnungsmethode: () => {
    gibt Dokument.Body.Children[0].ClientHeight zurück;
   },
  };
  window.onmessage = (Ereignis: beliebig) => {
   wenn (Array.isArray(event.data)) {
    wenn (event.data[0] === 'Ereignisname') {
     console.log(event.data[1]) // Ereignisparameter}
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

Live gehen

Nach einer Verpackungsrunde wird es endlich auf den Markt gebracht. Hier sprechen wir hauptsächlich darüber, wie Nginx zum Weiterleiten von Anfragen konfiguriert wird.

Wenn während der Entwicklung Schnittstellen zu mehreren verschiedenen Domänen benötigt werden, besteht die erste Reaktion des Front-Ends darin, einen Proxy zu konfigurieren. Ich war etwas verwirrt, als ich online ging.

 Proxy: {
  '/api': {
   Ziel: 'http://aaa.com',
   changeOrigin: wahr,
   Pfad neu schreiben: { '^/api': '' },
  },
  '/b-api': {
   Ziel: 'http://bbb.com/',
   changeOrigin: wahr,
   Pfad neu schreiben: { '^/b-api': '' },
  },
 },

Die Nginx-Konfiguration ist wie folgt

Server {
  hören Sie 80;
  Servername Zugriffsadresse;
  setze $rooturi "xxxx/dist";
  Speicherort ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ {
   läuft 365 Tage ab;
   Wurzel $rooturi;
  }
  Standort ^~/api/ {

   umschreiben ^/api/(.*)$ /$1 break;
   Proxy-Passwort http://aaa.com;
  }
  
  Standort ^~/b-api/ {

   umschreiben ^/b-api/(.*)$ /$1 break;
   Proxy-Passwort http://bbb.com;
  }
  
  Standort / {
   Wurzel $rooturi;
   versuche_dateien $uri $uri/ /index.html =404;
   add_header Cache-Control "kein Cache";
   add_header Zugriffskontrolle-Origin zulassen *;
  }

 
}

Dies ist das Ende dieses Artikels über das Implementierungsbeispiel eines React-Projekts von der Erstellung bis zur Bereitstellung. Weitere relevante React-Projekte von der Erstellung bis zur Bereitstellung 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!