L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Création d'applications React à partir de zéro avec Webpack 4 et Babel
Lorsque vous pensez créer une nouvelle application React, la première chose qui vous vient à l'esprit est de la créer avec une interface de ligne de commande (CLI), qui vous permet d'exécuter create-react-app commande pour configurer votre projet. L'application create-react-app vous aide à créer facilement des projets avec un minimum d'effort et de configuration.
Si vous souhaitez uniquement vous concentrer sur React, l'application create-react-app est tout ce dont vous aurez besoin pour créer un modèle React avec l'ensemble configuration requise, mais l'application create-react-app convient mieux aux petits projets et n'est pas toujours suffisante pour les applications plus grandes et plus complexes, comme cette application que vous allez créer. À la place, vous souhaiterez utiliser Webpack 4 et Babel pour créer votre application React.
Comment démarrer
Avant de créer une application React avec Webpack 4, vous devez disposer du Node Package Manager installé dans votre système. Sinon, vous pouvez le faire depuis ici .
Comprendre Webpack 4
Un webpack est un bundler de modules statiques pour les applications JavaScript modernes. Simplement, un webpack est un bundler de modules qui nous permet de regrouper nos fichiers de projet dans un seul fichier pour la production. Dans un webpackvous contrôlez l'environnement de développement et pouvez configurer vos configurations selon vos besoins.
Initialisation du projet
Tout d'abord, créez un dossier de projet avec le nom "react-webpack -demo.”
Ensuite, vous devrez initialiser votre projet à l'aide du gestionnaire de packages de nœuds. Pour l'initialisation du projet, entrez simplement la commande ci-dessous dans le terminal.
Cette commande vous posera quelques questions, mais vous pouvez les ignorer en appuyant sur la touche «Entrée» ou en remplissant les détails nécessaires sur le projet et procéder. Vous verrez maintenant un nouveau fichier nommé "package.json" dans la structure des dossiers. Cela devrait ressembler à ceci:
Utilisez la commande ci-dessous si vous voulez ignorer toutes les questions:
Créez la chaudière
Maintenant que vous avez initialisé le projet, vous devez installer et exécuter plusieurs éléments techniques.
Webpack
Installez le Webpack avec la commande suivante:
–save-dev (“ -D") est utilisé pour enregistrer les packages en tant que dépendance de développement. Cela ajoutera le Webpack et le Webpack-cli en tant que dépendance de développement à notre projet.
Installation de React
React et React-dom doivent être installés en tant que dépendance avec la commande suivante:
Installation de Babel :
React fonctionne avec ES6 et JSX, mais vous devez installer Babel pour convertir le code ES6/JSX en code JavaScript afin que le navigateur le comprenne . Installez « babel-core », « babel-loader », « babel-preset-env » et « babel-preset-react » en tant que dépendance de développement en suivant la commande ci-dessous :
Vous pouvez également afficher les définitions des commandes ci-dessous:
- Babel-core: Transforme le code ES6 en ES5.
- Babel-loader: Aide Webpack pour transpiler le code.
- Babel-preset-env: Preset qui aide Babel à convertir le code ES6, ES7 et ES8 en ES5.
- Babel-preset-react: Preset qui transforme JSX en JavaScript.
Index.js
Ensuite, créez le fichier index.js déposer. Ce fichier sera le point d'entrée de votre application et doit être créé à la racine du dossier «/ src» . Ensuite, ajoutez le code de ligne suivant à l'intérieur :
Index.html :
Vous devez également créer un fichier index.html à la racine du "/ src" et ajoutez le code suivant à l'intérieur :
Webpack Loaders
Vous devez maintenant créer un fichier webpack.config.js dans le répertoire racine du projet afin de pouvoir définir les règles de vos chargeurs. Vous devez définir le point d'entrée et le répertoire de sortie de votre application dans ce fichier. Ajoutez les lignes de code suivantes dans ce fichier.
Dans le code ci-dessus, vous pouvez voir que Babel-loader est utilisé pour charger vos fichiers JSX / JavaScript, le css-loader est utilisé pour charger et regrouper tous les fichiers CSS dans un seul fichier, et le chargeur de style ajoutera tous les styles à l'intérieur de la balise de style du document. Le pack Web regroupera tous les fichiers JavaScript dans index-bundle.js dans le répertoire "/dist". Pour en savoir plus sur les chargeurs Webpack cliquez ici .
Avant que le Webpack puisse utiliser le chargeur css et le chargeur de style, vous devez les installer en tant que dépendance de développement.
.babelrc
Créez un fichier .babelrc à la racine du répertoire du projet avec le contenu suivant à l'intérieur :
Ce fichier indiquera à Babel quels préréglages utiliser quand vous transpilez le code. Vous utiliserez ces deux préréglages:
- env : Ce préréglage est utilisé pour transpiler le code ES6 / ES7 / ES8 en ES5.
- react : Ce préréglage est utilisé pour transpiler le code JSX vers ES5.
Co mpiling des fichiers à l'aide de Webpack:
Ajoutez les lignes de code suivantes à l'intérieur de l'objet scripts situé dans le fichier «package.json» comme ci-dessous: [19659002]
Vous pouvez maintenant compiler le projet à l'aide de la commande ci-dessous :
Vous pouvez maintenant voir le fichier main.js créé sous le répertoire « /dist » après avoir exécuté la commande ci-dessus. Celui-ci contiendra le code ES5 transpilé du fichier index.js.
App.js:
Vous allez maintenant créer un fichier app.js dans notre dossier «/ src» avec les éléments suivants contenu à l'intérieur:
App.css:
Vous pouvez maintenant créer un fichier App.css dans le dossier «/ src» avec le contenu suivant à l'intérieur:
Vous utiliserez ce fichier pour vous assurer que le chargeur css et le chargeur de style fonctionnent correctement. Vous pouvez maintenant modifier le fichier index.js que nous avons créé précédemment pour qu'il contienne les lignes de code suivantes:
html-webpack-plugin
You doivent également installer html-webpack-plugin. Ce plugin génère un fichier HTML, injecte le script dans le fichier HTML et écrit ce fichier dans dist / index.html.
Installez le plugin html-webpack-plugin en tant que dépendance dev en exécutant la commande suivante:
Maintenant, configurez ce plugin dans le fichier webpack.config.js en ajoutant les lignes de code suivantes à l'intérieur :
La valeur de la clé du modèle est le fichier index.html qui vous avez créé plus tôt. Il utilise ce fichier comme modèle et génère un nouveau fichier nommé index.html dans le dossier "/dist" avec le script injecté.
Maintenant que la configuration est presque terminée, il ne reste plus qu'à compiler les fichiers sources à l'aide de webpack. Vous pouvez exécuter le projet en utilisant la commande ci-dessous:
Vous obtiendrez la sortie dans le dossier «/ dist» de notre projet. Après avoir ouvert l'index.html dans un navigateur Web, nous pouvons voir le texte « My React App!» à l'intérieur.
Cependant, l'approche a un inconvénient. Vous devez actualiser manuellement la page Web pour refléter vos modifications. Vous pouvez installer le webpack-dev-server pour que le webpack surveille vos modifications et actualise la page Web chaque fois qu'une modification est apportée à votre composant.
Installation de webpack-dev-server
Vous Vous devez exécuter la commande ci-dessous pour installer le serveur webpack-dev-server en tant que dépendance dev:
Ouvrez le fichier webpack.config.js et ajoutez les lignes ci-dessous: [19659002]
Exécutez maintenant la commande ci-dessous dans le terminal :
Vous devriez voir la fenêtre du navigateur s'ouvrir et afficher le contenu comme la capture d'écran ci-dessous :
Créer votre propre application est simple
Et voilà ! Vous pouvez créer votre propre modèle React avec ces différentes étapes et l'utiliser pour créer plus de projets React. Ceci n'est qu'un point de départ pour vous familiariser avec les concepts de Webpack et beaucoup peut être amélioré par rapport au passage à la production réelle. J'espère que vous êtes ravi d'apprendre d'autres façons de faire les choses avec Webpack 4 et Babel. Pour plus d'informations sur ces processus techniques, contactez nos experts aujourd'hui .
Source link