create-react-app(CRA) zu entfernen und eine eigene Vorlage für React-Anwendungen zu erstellen. Hier werden wir über die Vor- und Nachteile von CRA sprechen und eine Lösung vorschlagen, die diese ersetzen kann create-react-app.
Was ist CRA?
Die Create React App ist eine Suite von Tools, die von den Entwicklern von Facebook erstellt und verwaltet werden. CRA dient zum schnellen Erstellen von React-Anwendungen mit Vorlagen. Mit CRA wird mit einem einzigen Befehl eine React-Projektbasis erstellt.
Stärken der CRA
- Mit CRA können Sie mit einem Befehl eine Basis für ein React-Projekt erstellen:
npx create-react-app my-app - Die Verwendung einer CRA erspart dem Entwickler die eingehende Untersuchung von Hilfswerkzeugen. Ein Entwickler kann sich auf React konzentrieren und muss sich nicht um die Konfiguration von Webpack, Babel und anderen Dienstprogrammmechanismen kümmern.
- Bei der Anwendung der CRA benötigt der Entwickler nur eine Abhängigkeit, die für die Erstellung des Projekts relevant ist. Das ist
react-scripts. Diese Abhängigkeit umfasst alle anderen Assemblyabhängigkeiten. Daher stellt sich heraus, dass beispielsweise ein Befehl ausreicht, um Abhängigkeiten zu installieren und zu aktualisieren:
npm install react-scripts@latest
CRA
- CRA .
eject, CRA- . customize-cra react-app-rewired, . - CRA . React- , React- . CRA « », ,
react-scripts— , React-. , , ,react-scripts— , , «» (Babel) (Webpack), React- . , , , . - CRA scheint mir mit Möglichkeiten überladen zu sein, die sich in einigen Projekten als nicht beansprucht herausstellen können. Beispielsweise unterstützen mit CRA erstellte Anwendungsstubs SASS. Das heißt, wenn Ihr Projekt reguläres CSS oder weniger verwendet, ist die SASS-Unterstützung völlig unnötig. Hier , wenn Sie daran interessiert sind, dann ist die
package.jsonCRA - Datei nach dem Befehleject. Diese Datei "rollte" die zuvor dargestellten Abhängigkeiten abreact-scripts.
Eine Alternative zu CRA besteht darin, eine eigene Vorlage für die schnelle Erstellung grundlegender React-Projekte zu entwickeln.
Alternative zu CRA
Bei der Entwicklung einer Alternative zu CRA werden wir sie mit der Möglichkeit ausstatten, mit nur einem Befehl schnell grundlegende React-Projekte zu erstellen. Dies wiederholt eine der nützlichen Funktionen
create-react-app. Und wir werden natürlich die Nachteile von CRA nicht auf unser System übertragen, indem wir Abhängigkeiten unabhängig installieren und das Projekt einrichten. Unser Projekt wird keine zwei weiteren nützlichen CRA-Funktionen enthalten (die den Entwickler von der Notwendigkeit befreien, Hilfsmechanismen und das "One-Dependency" -Schema zu untersuchen), da sie auch Nachteile mit sich bringen (das Verbergen der internen Mechanismen von Hilfssubsystemen vor dem Entwickler und die Komplexität der Anpassung ihrer eigenen Projektaufbaukonfigurationen). ...
Hier ist das Repository, das den gesamten Code enthält, den wir in diesem Beitrag behandeln werden.
Beginnen wir mit der Initialisierung des Projekts mit Tools
npmund der Initialisierung des Git-Repositorys:
npm init
git init
Erstellen wir eine Datei mit
.gitignorefolgendem Inhalt:
node_modules
build
Dadurch können wir die Ordner, deren Namen in der Datei vorhanden sind, nicht in das Repository aufnehmen.
Lassen Sie uns nun überlegen, welche grundlegenden Abhängigkeiten wir zum Erstellen und Ausführen einer React-Anwendung benötigen.
React- und React-Dom-Bibliotheken
Dies sind die einzigen Laufzeitabhängigkeiten, die wir benötigen:
npm install react react-dom --save
Transpiler (Babel)
Der Babel-Transpiler konvertiert ECMAScript 2015+ -standardkonformen Code in Code, der sowohl in neuen als auch in älteren Browsern funktioniert. Babel wird dank der Verwendung von Voreinstellungen auch zur Verarbeitung von JSX-Code verwendet:
npm install @babel/core @babel/preset-env @babel/preset-react --save-dev
So sieht eine einfache Babel-Konfiguration aus, um Ihre React-Anwendungen zum Laufen zu bringen. Diese Konfiguration kann zu einer Datei hinzugefügt werden
.babelrcoder zu package.json:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Babel unterstützt viele Presets und Plugins . Sie können bei Bedarf zum Projekt hinzugefügt werden.
Bandler (Webpack)
Der Webpack-Bundler ist für die Erstellung des Projekts verantwortlich und bildet eine einzelne Anwendungsdatei (Bundle), die auf dem Projektcode und dem Code seiner Abhängigkeiten basiert. Bei Verwendung von Projektoptimierungstechniken wie der Code-Aufteilung kann ein Anwendungspaket mehrere Dateien enthalten.
npm install webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin --save-devEine einfache Webpack-Konfiguration zum Erstellen von React-App-Paketen sieht folgendermaßen aus:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
}),
],
};Hier können je nach den Anforderungen einer bestimmten Anwendung verschiedene Bootloader hinzugefügt werden . Wenn Sie an diesem Thema interessiert sind, lesen Sie meinen Artikel , in dem ich über Webpack-Konfigurationen spreche, mit denen Sie React-Anwendungen für die Verwendung in der Produktion vorbereiten können.
Dies sind alle Abhängigkeiten, die wir brauchen. Fügen wir nun dem Projekt eine HTML-Vorlagendatei und eine Stub-React-Komponente hinzu.
Erstellen Sie einen Ordner im Projektverzeichnis
srcund fügen Sie ihm eine Datei hinzu index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Boilerplate</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Erstellen Sie eine React-Komponente im selben Ordner
HelloWorld:
import React from 'react';
const HelloWorld = () => {
return (
<h3>Hello World</h3>
);
};
export default HelloWorld;
Fügen Sie die Datei demselben Ordner hinzu
index.js:
import React from 'react';
import { render } from 'react-dom';
import HelloWorld from './HelloWorld';
render(<HelloWorld />, document.getElementById('root'));
Fügen Sie abschließend den
package.jsonBeschreibungen der Skripte zum Starten ( start) und Erstellen ( build) des Projekts Folgendes hinzu:
"scripts": {
"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"
}
Das ist alles. Wir haben jetzt eine funktionsfähige Stub React-Anwendung zur Verfügung. Sie können dies überprüfen, indem Sie die Befehle
npm startund ausführen npm run build.
Lassen Sie uns nun unser System mit der Möglichkeit ausstatten, eine Projektvorlage mit einem einzigen Befehl vorzubereiten. Das heißt, wir werden eine der Stärken der Ratingagentur neu erschaffen. Wir werden eine ausführbare JS-Datei verwenden, die aufgerufen wird, wenn Sie den entsprechenden Befehl in die Befehlszeile eingeben. Ein Befehl wie dieser könnte beispielsweise folgendermaßen aussehen:
reactjs-boilerplate new-projectUm diese Idee umzusetzen, verwenden wir den bin- Abschnitt der Datei
package.json.
Installieren Sie zunächst das Paket fs-extra :
npm i fs-extraErstellen wir nun eine ausführbare JS-Datei
start.js, die sich in binunserem Projektordner befindet. Fügen wir den folgenden Code in diese Datei ein:
#!/usr/bin/env node
const fs = require("fs-extra");
const path = require("path");
const https = require("https");
const { exec } = require("child_process");
const packageJson = require("../package.json");
const scripts = `"start": "webpack-dev-server --mode=development --open --hot",
"build": "webpack --mode=production"`;
const babel = `"babel": ${JSON.stringify(packageJson.babel)}`;
const getDeps = (deps) =>
Object.entries(deps)
.map((dep) => `${dep[0]}@${dep[1]}`)
.toString()
.replace(/,/g, " ")
.replace(/^/g, "")
// , ,
.replace(/fs-extra[^\s]+/g, "");
console.log("Initializing project..");
// npm-
exec(
`mkdir ${process.argv[2]} && cd ${process.argv[2]} && npm init -f`,
(initErr, initStdout, initStderr) => {
if (initErr) {
console.error(`Everything was fine, then it wasn't:
${initErr}`);
return;
}
const packageJSON = `${process.argv[2]}/package.json`;
// ,
fs.readFile(packageJSON, (err, file) => {
if (err) throw err;
const data = file
.toString()
.replace(
'"test": "echo \\"Error: no test specified\\" && exit 1"',
scripts
)
.replace('"keywords": []', babel);
fs.writeFile(packageJSON, data, (err2) => err2 || true);
});
const filesToCopy = ["webpack.config.js"];
for (let i = 0; i < filesToCopy.length; i += 1) {
fs.createReadStream(path.join(__dirname, `../${filesToCopy[i]}`)).pipe(
fs.createWriteStream(`${process.argv[2]}/${filesToCopy[i]}`)
);
}
// npm, , .gitignore, ; . GitHub- raw- .gitignore
https.get(
"https://raw.githubusercontent.com/Nikhil-Kumaran/reactjs-boilerplate/master/.gitignore",
(res) => {
res.setEncoding("utf8");
let body = "";
res.on("data", (data) => {
body += data;
});
res.on("end", () => {
fs.writeFile(
`${process.argv[2]}/.gitignore`,
body,
{ encoding: "utf-8" },
(err) => {
if (err) throw err;
}
);
});
}
);
console.log("npm init -- done\n");
//
console.log("Installing deps -- it might take a few minutes..");
const devDeps = getDeps(packageJson.devDependencies);
const deps = getDeps(packageJson.dependencies);
exec(
`cd ${process.argv[2]} && git init && node -v && npm -v && npm i -D ${devDeps} && npm i -S ${deps}`,
(npmErr, npmStdout, npmStderr) => {
if (npmErr) {
console.error(`Some error while installing dependencies
${npmErr}`);
return;
}
console.log(npmStdout);
console.log("Dependencies installed");
console.log("Copying additional files..");
//
fs.copy(path.join(__dirname, "../src"), `${process.argv[2]}/src`)
.then(() =>
console.log(
`All done!\n\nYour project is now ready\n\nUse the below command to run the app.\n\ncd ${process.argv[2]}\nnpm start`
)
)
.catch((err) => console.error(err));
}
);
}
);
Verknüpfen wir nun diese ausführbare JS-Datei mit dem Befehl von
package.json:
"bin": {
"your-boilerplate-name": "./bin/start.js"
}
Erstellen wir einen lokalen Link für das Paket:
npm link
Wenn wir nun nach Ausführung dieses Befehls einen Befehl des Formulars im Terminal ausführen
your-boilerplate-name my-app, wird unsere ausführbare Datei aufgerufen start.js. Es wird einen neuen Ordner mit einem Namen erstellen my-app, kopieren Sie die Dateien package.json, webpack.config.jsund .gitignoresowie die Ordner src, und die Abhängigkeiten des neuen Projektes installieren my-app.
Wunderbar. Jetzt läuft alles auf Ihrem Computer und ermöglicht es Ihnen, grundlegende React-Projekte mit einer eigenen Build-Konfiguration mit einem einzigen Befehl zu erstellen.
Sie können Ihre Vorlage in der npm- Registrierung veröffentlichen . Dazu müssen Sie das Projekt zunächst an das GitHub-Repository senden. Folgen Sie dann diesen Anweisungen.
Herzliche Glückwünsche! Wir haben gerade in wenigen Minuten eine Alternative geschaffen
create-react-app. Unsere Lösung ist nicht mit unnötigen Funktionen überladen (Abhängigkeiten können bei Bedarf zu Projekten hinzugefügt werden, die auf ihrer Grundlage erstellt wurden). Mithilfe dieser Funktion können Sie die Projekterstellungskonfiguration einfach an Ihre Anforderungen anpassen.
Natürlich ist unsere Lösung minimalistisch. Auf dieser Grundlage erstellte Projekte können nicht als betriebsbereit angesehen werden. Um sie auf die eigentliche Arbeit vorzubereiten, müssen wir unsere Vorlage mit einigen Webpack-Einstellungen ausstatten, die für die Optimierung der Projekterstellung verantwortlich sind.
Ich habe eine Reactjs-Boilerplate-Vorlage vorbereitetSo können Sie produktionsbereite Projekte erstellen. Es verwendet die entsprechende Build-Konfiguration, Flusen und Hooks, die für die Überprüfung des Projekts vor dem Erstellen von Commits verantwortlich sind. Probieren Sie diese Vorlage aus. Wenn Sie Ideen zur Verbesserung haben oder sich dazu entschließen, zu seiner Entwicklung beizutragen, beteiligen Sie sich an der Arbeit daran.
Ergebnis
In diesem Artikel haben wir über Folgendes gesprochen:
- Wir haben die Vor- und Nachteile behandelt
create-react-app. - Wir haben in unserem Projekt eine nützliche CRA-Funktion zum Erstellen leerer React-Anwendungen mit einem Befehl implementiert. Und wir haben die Mängel von CRA beseitigt.
- Wir haben unser Projekt mit den minimalen Webpack- und Babel-Konfigurationen ausgestattet, die zum Erstellen und Ausführen von React-Anwendungen erforderlich sind.
- Wir haben eine React-Komponente erstellt
HelloWorld.jsund die Möglichkeit bereitgestellt, ein Projekt zu erstellen und es auf dem Entwicklungsserver auszuführen. - Wir haben eine ausführbare JS - Datei und verknüpft es mit dem entsprechenden Befehl , um die Verwendung von
binDateiabschnittpackage.json. - Wir haben das Team verwendet
npm link, um einen lokalen Link für unser Projekt zu erstellen und daraus mit einem einzigen Team neue Basisprojekte erstellen zu können.
Ich hoffe, dieses Material hilft Ihnen bei der Entwicklung von Projekten, die auf React basieren.
Verwenden Sie die Create-React-App, wenn Sie neue React-Projekte erstellen?
