React erstellt ein Projekt basierend auf Create-React-App

In diesem Artikel wird hauptsächlich die Erstellung von Reaktionsprojekten basierend auf der Create-React-App vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Was ist Create-React-App?

Create-React-App ist eine JS-Bibliothek, mit der sich React-Projekte einfach erstellen lassen, ohne React erstellen zu müssen. Es ist mühsam, während des Projekts das Webpack zu konfigurieren, den Server zu debuggen, Skripte auszuführen usw. Sie müssen diese Bibliothek nur verwenden, um die Erstellung und Initialisierung des Reaktionsprojekts mit einem Klick abzuschließen

Zuerst , verwenden Sie create-react-app. Um ein React-Projekt zu erstellen, lesen Sie bitte https://github.com/facebookincubator/create-react-app

Hinweis: Alles, was mit „[]“ umschlossen ist, ist Anpassbarer Inhalt, zum Beispiel: cd [Projektname] kann tatsächlich cd my-app oder cd my-project sein. Kurz gesagt, der Inhalt des Pakets „[]“ repräsentiert nur die entsprechenden Variablen im Kontext.

npm install -g create-react-app 
 
create-react-app [project-name] 
cd [project-name]

Nachdem Sie den obigen Befehl ausgeführt haben, befinden Sie sich bereits im neu erstellten Projekt. Führen Sie nun npm run start und npm run build aus. Allerdings sind alle Konfigurationen standardmäßig ausgeblendet. Um die Konfiguration anzupassen, müssen Sie einen Befehl ausführen:

npm run eject

Sie werden mit diesem Befehl aufgefordert . Unwiderruflich, möchten Sie fortfahren? Geben Sie y ein, damit alle Konfigurationselemente angezeigt werden. Zu diesem Zeitpunkt können Sie auch einige benutzerdefinierte Konfigurationen vornehmen, z. B.:

Ändern Sie den Ausgabespeicherort nach dem Erstellen

Statische Ressourcen wie js/css/img werden verwendet Standardmäßig werden die Konfigurationselemente unter build -> in config -> webpack.config.prod.js ausgegeben.

1. js befindet sich im Ausgabeattribut, ungefähr in Zeile 60;

2. CSS wird am Anfang in der Variablen cssFilename deklariert, ungefähr Zeile 38 ;

3. Das Bild befindet sich in der Loader-Konfiguration des Moduls -> Regeln, ungefähr Zeile 143;
   

Die Karte Die Datei wird von der devtool-Attributsteuerung generiert. Wenn Sie keine Zuordnung wünschen, kommentieren Sie sie einfach aus, ungefähr in Zeile 57. Manifest.json befindet sich in der Konfiguration von ManifestPlugin, ungefähr in Zeile 294 >

Basic Die Vorlage befindet sich in der Konfiguration von HtmlWebpackPlugin, aber Sie können sehen, dass sie auf die Datei „./paths.js“ verweist, daher müssen Sie das appHtml-Attribut in config -> ändern. js;

Standardmäßig wird das Konfigurationselement fs.emptyDirSync(paths.appBuild); auskommentiert Löschen Sie die alten Dateien (dies kann während der Graustufenfreigabe passieren).

Keine anderen Möglichkeiten, die Konfiguration ohne Auswerfen zu ändern

Zusätzlich zur npm-Ausführung Durch Auswerfen werden alle Konfigurationsdateien verfügbar gemacht. Es gibt andere Möglichkeiten, die Konfiguration zu ändern. Aufgrund des Themas dieses Artikels werden wir ihn nicht erweitern und nur relevante Links angeben.

Eine elegantere Methode (manche Leute denken) besteht darin, das React-App-Rewired-Plug-In einzuführen, um eine Konfigurationsüberschreibung zu erreichen. Sie müssen eine neue config-overrides.js-Datei im Stammverzeichnis erstellen und alles schreiben, was Sie konfigurieren möchten (warum gibt es eine andere Konfiguration ...)? Sie müssen auch npm start und andere verwandte Befehle neu schreiben um die Details anzuzeigen.

Ein weiteres Beispiel finden Sie in der Empfehlung „Hinzufügen eines CSS-Präprozessors (Sass, Less usw.)“ auf der Git-Homepage von create-react-app. Die allgemeine Idee besteht darin, zunächst ein Plug-in namens node-sass-chokidar zu installieren, das sass in der Knotenumgebung kompilieren kann, und dann npm-run-all zu verwenden, um npm start und watch-css (Befehle zur Überwachung von sass-Dateien) auszuführen zur gleichen Zeit. Ich persönlich habe das Gefühl, dass es ein großer Kreis ist, also lasst uns noch einmal darüber diskutieren. . .

react usw. werden nicht als globale Variablen gepackt

Um cdn zu verwenden, zitieren wir häufig Skript-Tags von React oder anderen ähnlichen Bibliotheken auf der Seite , damit beim Durchsuchen Es gibt entsprechende globale Variablen in der Serverumgebung, während die Größe von js reduziert wird. Nehmen Sie unten die Reaktion als Beispiel.

Fügen Sie zunächst den folgenden Code zur Konfiguration von config -> webpack.config.prod.js hinzu:

module.exports = { 
 ... 
 externals: { 
 'react': 'React', 
 'react-dom': 'ReactDOM' 
 }, 
 ... 
}

Key entspricht dem Namen der Bibliothek und value entspricht dem Namen der globalen Variablen. Hierbei ist zu beachten, dass der Name der globalen Variablen mit dem Namen des Imports im Code übereinstimmen und standardisiert sein muss.

Außerdem muss hier die Vorlagendatei der HTML-Webpack-Plugin-Plugin-Konfiguration geändert werden, da globale Variablen hinzugefügt werden müssen. Fügen Sie einfach das entsprechende Skript hinzu. Nehmen Sie public -> index.html als Beispiel:

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 <meta name="theme-color" content="#000000"> 
 <!-- 
  code here 
 --> 
 </head> 
 <body> 
 <noscript> 
  You need to enable JavaScript to run this app. 
 </noscript> 
 <p id="root"></p> 
 <!-- 
  code here 
 --> 
<!-- 新插入的两个js --> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> 
 <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> 
 </body> 
</html>

F: Da es globale Variablen im Browser gibt, wie z. B. window.React , Dann besteht keine Notwendigkeit, React aus „react“ im Code zu importieren. Wenn außerdem keine Notwendigkeit besteht, „react“ zu importieren, welchen Sinn hat es dann, Externals festzulegen (dieser Ort ist sehr klar, ist das der Grund)?

Antwort: Wenn Sie Import und External wie oben erwähnt entfernen, kann die erstellte Datei reibungslos im Browser ausgeführt werden. Wenn der Server jedoch während der Entwicklung gestartet wird, kann die Serverseite die Referenzen nicht analysieren und keine Hot-Updates durchführen. Darüber hinaus kann die Serverseite keine Abhängigkeiten für Front-End- und Back-End-Isomorphismus finden. Wenn Sie also die statische Dateiüberwachung aktivieren und den Browser manuell aktualisieren, gibt es theoretisch kein Problem ohne Import und Extern.

Sass oder weniger installieren (nehmen Sie Sass als Beispiel)

npm install sass-loader node-sass --save-dev

oder

npm install less-loader less --save-dev

安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就可以了，也不用配置别的了（less同）。

//test: /\.css$/ 
test: /\.(css|scss|sass)$/ 
... 
use:[ 
 { 
 ... 
 }, 
 "sass-loader" 
]

添加ant-design

安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn

npm install antd babel-plugin-import --save-dev

在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代码：

plugins: [ 
 ['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件 
]

如果启用了 style:true 那就必须是装less了

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue实现搜索 和新闻列表功能简单范例

vue axios 表单提交上传图片的实例

vue中实现图片和文件上传的示例代码

Das obige ist der detaillierte Inhalt vonReact erstellt ein Projekt basierend auf Create-React-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!