De nombreux outils sont disponibles pour préparer l'environnement au développement de React. Par exemple, notre
didacticiel React utilise l'outil
create-react-app pour créer un projet de modèle contenant tout ce dont vous avez besoin pour développer des applications React. L'auteur de l'article, dont nous publions la traduction aujourd'hui, souhaite expliquer comment configurer indépendamment l'environnement pour développer des projets React à l'aide de Babel et Webpack. Ces outils sont également utilisés dans les projets créés à l'aide des outils create-react-app, et nous pensons que toute personne qui étudie le développement de React sera intéressée à les connaître et à la méthodologie pour créer des projets React à un niveau plus profond. À savoir, nous parlerons de la configuration de Webpack pour que cet outil utilise Babel pour compiler du code JSX en code JavaScript et de la configuration du serveur utilisé pour développer des projets React.
Webpack
Webpack est utilisé pour compiler des modules JavaScript. Cet outil est souvent appelé «bundler» (du bundler) ou «module builder». Après l'avoir
installé , vous pouvez l'utiliser avec
l'interface de ligne de commande ou son
API . Si vous n'êtes pas familier avec Webpack, il est recommandé de lire les
principes de base de son fonctionnement et de voir sa
comparaison avec d'autres constructeurs de modules. Voici à quoi ressemble à un niveau élevé Webpack.
Travail de WebpackWebpack prend tout ce dont le projet dépend et le convertit en ressources statiques qui peuvent être transférées au client. L'empaquetage des applications est très important, car la plupart des navigateurs limitent la possibilité de télécharger des ressources simultanément. De plus, il vous permet d'économiser du trafic en n'envoyant au client que ce dont il a besoin. En particulier, Webpack utilise un cache interne, grâce auquel les modules ne sont téléchargés qu'une seule fois sur le client, ce qui conduit finalement à un chargement plus rapide des sites.
Babel
Babel est un transpilateur, qui est principalement utilisé pour convertir les constructions adoptées dans les versions récentes de la norme ECMAScript en un format compréhensible à la fois pour les navigateurs modernes et non pour les derniers navigateurs et autres environnements dans lesquels JavaScript peut s'exécuter. Babel, en plus, peut convertir en code JavaScript et JSX en utilisant
@ babel / preset-react .
BabelGrâce à Babel, nous pouvons, lors du développement d'applications React, utiliser JSX. Par exemple, voici le code qui utilise JSX:
import React from "react"; function App(){ return( <div> <b>Hello world!</b> </div> ) } export default App;
Un tel code semble soigné, il est clair, il est facile à lire et à modifier. En le regardant, vous pouvez immédiatement comprendre qu'il décrit un composant qui renvoie un élément
<div> qui contient le texte
Hello world! en gras. Et voici un exemple de code faisant la même chose dans laquelle JSX n'est pas utilisé:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement( "div", null, _react2.default.createElement( "b", null, "Hello world!" ) ); } exports.default = App;
Les avantages du premier exemple par rapport au second sont évidents.
Prérequis
Afin de mettre en place un projet d'application React, nous aurons besoin des modules npm suivants.
- react - Bibliothèque React.
- react-dom est une bibliothèque qui nous aidera à utiliser les capacités de React dans le navigateur.
- babel / core - transpilation JSX en JS.
- babel / preset-env - crée un code adapté aux navigateurs plus anciens.
- babel / preset-react - configure le transpilateur pour qu'il fonctionne avec le code React.
- babel-loader - configure Webpack pour fonctionner avec Babel.
- css-loader - configuration de Webpack pour travailler avec CSS.
- webpack - assemblage de modules.
- webpack-cli - travaillez avec Webpack depuis la ligne de commande.
- style-loader - chargement de tout le code CSS utilisé dans l'en-tête du fichier HTML.
- webpack-dev-server - configuration d'un serveur de développement.
Créez maintenant, dans le dossier
react-scratch , un nouveau projet en utilisant npm (
npm init ) et installez certains des packages ci-dessus avec la commande suivante:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server
Le point d'entrée du programme sera le fichier
index.js , qui est contenu dans le dossier
src situé dans le répertoire racine du projet. La structure de ce projet est présentée ci-dessous. Certains fichiers et dossiers sont créés automatiquement, vous devrez en créer vous-même.
Structure du projetLe projet terminé, que nous traiterons ici, se trouve dans
ce référentiel.
Le dossier des
component contiendra les composants du projet (dans notre cas, il n'y a qu'un seul composant ici). Dans le dossier
dist , dans le fichier
main.js , le code compilé sera localisé, et
index.html est, comme déjà mentionné, le fichier HTML principal de notre application.
Configuration du Webpack
Webpack peut être configuré de plusieurs façons. En particulier, les paramètres de cet outil peuvent prendre la forme d'arguments de ligne de commande ou être présents dans le projet sous forme de fichier de configuration avec le nom
webpack.config.js . Dans ce document, vous devez décrire et exporter l'objet contenant les paramètres. Nous allons commencer à configurer ce fichier avec une description de l'objet qui ressemble à ceci (nous le considérerons en partie, et ci-dessous nous donnerons son code complet):
{ entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, }
La propriété d'
entry définit le fichier principal avec le code source du projet. La valeur de la propriété
mode indique le type d'environnement à compiler (dans notre cas, c'est l'environnement de
development ) et où placer le fichier compilé.
Travail de projet
Placez le code suivant dans le fichier
index.html de notre projet, situé dans le dossier
dist :
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>React From Scratch</title> </head> <body> <div id="root"> </div> </body> <script type="text/javascript" src="main.js"> </script> </html>
Faites attention à la balise de
script présente dans ce fichier. Il pointe vers le fichier
main.js , qui sera obtenu lors de la compilation du projet. Nous utiliserons l'élément
<div> avec l'identifiant
root pour afficher l'application React.
Installez maintenant les packages react et react-dom:
npm install react react-dom
Ajoutez le code suivant à
index.js :
import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root"));
Il s'agit du code standard pour ces fichiers d'application React. Ici, nous connectons les bibliothèques, connectons le fichier de composant et affichons l'application dans la
<div> avec l'identifiant
root .
Voici le code du fichier
app.component.js :
import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() { return <div className={s.intro}>Hello World</div>; } } export default MyComponent;
Voici le code du fichier
app.component.css :
.intro { background-color: yellow; }
Configurer Babel
Babel est un transporteur à fort potentiel. Il peut notamment convertir MOINS en CSS, JSX en JS, TypeScript en JS. Nous n'utiliserons que deux configurations avec elle - react et env (elles sont aussi appelées "presets"). Babel peut être configuré de différentes manières, en particulier, nous parlons d'outils de ligne de commande, d'un fichier de paramètres spéciaux et du fichier
package.json standard. Nous sommes satisfaits de la dernière option. Ajoutez la section suivante à
package.json :
"babel": { "presets": [ "@babel/env", "@babel/react" ] }
Grâce à ces paramètres, Babel saura quels préréglages il doit utiliser. Configurez maintenant Webpack pour utiliser Babel.
Configurer Webpack pour fonctionner avec Babel
Ici, nous utiliserons la bibliothèque babel-loader, qui vous permet d'utiliser Babel avec Webpack. En fait, le fait est que Babel pourra intercepter et traiter des fichiers avant qu'ils ne soient traités par Webpack.
Fichiers JS
Voici les règles concernant l'utilisation des fichiers JS (ce code ira dans le fichier
webpack.config.js ), elles représentent l'une des propriétés de l'objet paramètres exporté par ce fichier:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, ] }
Un tableau de règles est stocké dans la propriété rules de l'objet représenté ici, selon lequel le fichier spécifié par l'expression régulière décrite dans la propriété
test doit être traité. Dans ce cas, la règle sera appliquée à tous les fichiers avec les extensions
.m et
.js , alors que nous ne voulons pas
node_modules fichiers du dossier
node_modules et
bower_components . De plus, ici, nous indiquons que nous voulons utiliser babel-loader. Après cela, nos fichiers JS seront d'abord traités par Babel, puis emballés à l'aide de Webpack.
Fichiers filesCSS
Ajoutez les paramètres de traitement des fichiers CSS au tableau de
rules de l'objet
module :
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, ] }
Nous allons résoudre la tâche de traitement des fichiers CSS à l'aide de style-loader et css-loader. La propriété
use peut accepter un tableau d'objets ou de chaînes. Les chargeurs sont appelés, à partir du dernier, donc nos fichiers seront traités en premier avec css-loader. Nous avons configuré cet outil en écrivant
true dans la propriété
modules de l'objet
options . Grâce à cela, les styles CSS ne seront appliqués qu'aux composants dans lesquels ils sont importés. Css-loader autorisera les commandes d'importation dans les fichiers CSS, après quoi le style-loader ajoutera ce qu'il se présente sous la forme d'une balise de
style dans la section
<head> de la page:
<style> <-- css --> </style>
▍Ressources statiques
Nous continuerons à travailler sur l'objet de paramètres du
module , décrivant les règles de traitement des ressources statiques qu'il contient:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] }
Si le système rencontre un fichier avec l'extension PNG, SVG, JPG ou GIF, le chargeur de fichiers sera utilisé pour traiter un tel fichier. Le traitement de ces fichiers est important pour la bonne préparation et l'optimisation du projet.
Configuration d'un serveur de développement
Maintenant, dans le fichier
webpack.config.js , configurez le serveur de développement:
devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true },
La propriété
contentBase devServer paramètres
contentBase pointe vers le dossier dans lequel se trouvent nos ressources et le fichier
index.html . La propriété
port vous permet de spécifier le port sur lequel le serveur écoutera. La propriété
watchContentBase permet de surveiller les modifications des fichiers dans le dossier spécifié par la propriété
contentBase .
Voici le code complet du fichier
webpack.config.js :
const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] } };
Nous allons maintenant ajouter au
package.json , dans la section
scripts , la commande pour démarrer le serveur de développement et la commande pour commencer à construire le projet:
"scripts": { "dev": "webpack-dev-server", "start": "webpack" },
Maintenant, tout est prêt pour démarrer le serveur de développement avec la commande suivante:
npm run dev
Si vous allez maintenant à l'adresse
http: // localhost: 9000 , vous pouvez voir la page de notre projet.
Page de projet dans le navigateurAfin de construire un projet, utilisez la commande suivante:
npm run start
Après cela, vous pouvez ouvrir le fichier
index.html dans un navigateur et voir la même chose que vous pouvez voir en démarrant le serveur de développement et en allant à l'adresse
http: // localhost: 9000 .
Résumé
Cet article fournit une vue d'ensemble de la configuration de Webpack et Babel pour une utilisation dans les projets React. En fait, des configurations beaucoup plus complexes peuvent être créées sur la base que nous avons démontée aujourd'hui. Par exemple, au lieu de CSS, vous pouvez utiliser MOINS, au lieu de JS normal, écrire en TypeScript. Si nécessaire, vous pouvez, par exemple, configurer la minification des fichiers et bien plus encore. Bien sûr, si aujourd'hui votre première connaissance du processus d'auto-réglage des projets React a eu lieu, vous pouvez penser que tout cela est très difficile et beaucoup plus facile à utiliser le modèle prêt à l'emploi. Cependant, après avoir compris un peu, vous vous rendrez compte qu'une légère augmentation de la complexité des paramètres vous donne plus de liberté, vous permettant de personnaliser vos projets exactement comme vous en avez besoin, sans dépendre complètement de certaines solutions «standard» et réduire votre dépendance à eux.
Chers lecteurs! Quelle approche utilisez-vous le plus souvent lors de la préparation de votre environnement de travail pour les projets React?