Configuration d'un projet ES6 à l'aide de Babel et WebPack

Dans cet article, nous allons chercher à créer une configuration de build pour gérer le javascript moderne (en cours d'exécution dans des navigateurs Web) en utilisant Babel et WebPack.

Ceci est nécessaire pour garantir que notre code JavaScript moderne en particulier est rendu compatible avec une gamme plus large de navigateurs qu'il pourrait être autrement.

JavaScript, comme la plupart des technologies liées au Web, évolue tout le temps. Dans le bon vieux temps, nous pourrions déposer quelques balises dans une page, peut-être inclure jQuery et quelques plugins, puis être bon à y aller.

Cependant, depuis l'introduction de l'ES6, les choses sont devenues progressivement plus compliquées. La prise en charge du navigateur pour les fonctionnalités de langue plus récentes est souvent inégale, et à mesure que les applications JavaScript deviennent plus ambitieuses, les développeurs commencent à utiliser des modules pour organiser leur code. À son tour, cela signifie que si vous écrivez JavaScript moderne aujourd'hui, vous devrez introduire une étape de construction dans votre processus.

comme vous pouvez le voir sur les liens en dessous, la conversion de l'ES6 en ES5 augmente considérablement le nombre de navigateurs que nous pouvons soutenir.

• compatibilité ES6
• compatibilité ES5

Le but d'un système de construction est d'automatiser le flux de travail nécessaire pour préparer notre code pour les navigateurs et la production. Cela peut inclure des étapes telles que le transplage du code vers une norme différente, la compilation de SASS vers CSS, les fichiers de regroupement, le code de mini-réduction et de compression, et bien d'autres. Pour s'assurer que ceux-ci sont systématiquement reproductibles, un système de construction est nécessaire pour initier les étapes d'une séquence connue d'une seule commande.

Les plats clés

• Utilisez Babel et WebPack pour configurer un projet JavaScript moderne, garantissant que le code ES6 est compatible sur une gamme plus large de navigateurs Web.
• Commencez par créer une structure de projet avec un fichier package.json et organisez le code en src et en répertoires publics pour la source et le transpillé JavaScript respectivement.
• Installez Babel pour transpiler ES6 vers ES5, ciblant des versions de navigateur spécifiques et automatisant ce processus à l'aide de scripts NPM.
• Implémentez les modules ES6 pour gérer et modulariser efficacement le code JavaScript, bien que la compatibilité avec des navigateurs plus anciens comme IE11 reste limité.
• Intégrer WebPack pour regrouper les modules JavaScript dans des fichiers uniques ou multiples, réduisant les demandes de serveur et optimisant les temps de chargement.
• Améliorer le flux de travail de développement avec les fonctionnalités d'observation et de serveur de développement de WebPack pour reconstruire et actualiser automatiquement le navigateur lors des modifications de code.

Prérequis

Pour suivre, vous devrez installer à la fois Node.js et NPM (ils sont emballés ensemble). Je recommanderais d'utiliser un gestionnaire de version tel que NVM pour gérer l'installation de votre nœud (voici comment), et si vous souhaitez de l'aide à la saisie avec NPM, consultez le tutoriel NPM pour les débutants de SitePoint.

Configurer

Créez un dossier racine quelque part sur votre ordinateur et accédez à celui-ci à partir de votre ligne de terminal / de commande. Ce sera votre dossier .

Créez un fichier package.json avec ceci:

<span>npm init -y
</span>

Remarque: l'indicateur -y crée le fichier avec les paramètres par défaut et signifie que vous n'avez pas besoin de compléter les détails habituels de la ligne de commande. Ils peuvent être modifiés dans votre éditeur de code plus tard si vous le souhaitez.

Dans votre dossier , créez les répertoires SRC, SRC / JS et public. Le dossier SRC / JS sera l'endroit où nous allons mettre notre code source non transformé, et le dossier public sera là où le code transpilé finira.

Transpliant avec Babel

Pour nous faire avancer, nous allons installer Babel-Cli, qui offre la possibilité de transpiler ES6 dans ES5, et Babel-Preset-ENV, qui nous permet de cibler des versions de navigateur spécifiques avec le code transpilé.

<span>npm install babel-cli babel-preset-env --save-dev
</span>

Vous devriez maintenant voir ce qui suit dans votre package.json:

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

Bien que nous soyons dans le fichier package.json, modifions la section Scripts pour lire comme ceci:

<span>"scripts": {
</span>  <span>"build": "babel src -d public"
</span><span>},
</span>

Cela nous donne la possibilité d'appeler Babel via un script, plutôt que directement à partir du terminal à chaque fois. Si vous souhaitez en savoir plus sur les scripts NPM et ce qu'ils peuvent faire, consultez ce didacticiel SitePoint.

Enfin, avant de pouvoir tester si Babel fait son truc, nous devons créer un fichier de configuration .babelrc. C'est ce à quoi notre package Babel-Preset-env fera référence pour ses paramètres transpiles.

Créez un nouveau fichier dans votre répertoire appelé .babelrc et collez ce qui suit:

<span>{
</span>  <span>"presets": [
</span>    <span>[
</span>      <span>"env",
</span>      <span>{
</span>        <span>"targets": {
</span>          <span>"browsers": ["last 2 versions", "safari >= 7"]
</span>        <span>}
</span>      <span>}
</span>    <span>]
</span>  <span>]
</span><span>}
</span>

Cela mettra en place Babel pour transpiler pour les deux dernières versions de chaque navigateur, plus Safari à V7 ou plus. D'autres options sont disponibles en fonction des navigateurs que vous devez prendre en charge.

Avec celle enregistrée, nous pouvons maintenant tester les choses avec un exemple de fichier JavaScript qui utilise ES6. Aux fins de cet article, j'ai modifié une copie de LeftPad pour utiliser la syntaxe ES6 dans un certain nombre d'endroits: modèle littéraux, fonctions de flèche, const et let.

<span>"use strict";
</span>
<span>function leftPad(str<span>, len, ch</span>) {
</span>  <span>const cache = [
</span>    <span>"",
</span>    <span>" ",
</span>    <span>"  ",
</span>    <span>"   ",
</span>    <span>"    ",
</span>    <span>"     ",
</span>    <span>"      ",
</span>    <span>"       ",
</span>    <span>"        ",
</span>    <span>"         "
</span>  <span>];
</span>  str <span>= str + "";
</span>  len <span>= len - str.length;
</span>  <span>if (len   <span>if (!ch && ch !== 0) ch = " ";
</span>  ch <span>= ch + "";
</span>  <span>if (ch === " " && len     <span>return () => {
</span>      cache<span>[len] + str;
</span>    <span>};
</span>  <span>let pad = "";
</span>  <span>while (true) {
</span>    <span>if (len & 1) pad += ch;
</span>    len <span>>>= 1;
</span>    <span>if (len) ch += ch;
</span>    <span>else break;
</span>  <span>}
</span>  <span>return <span>`<span>${pad}</span><span>${str}</span>`</span>;
</span><span>}
</span></span></span>

Enregistrez ceci en tant que SRC / JS / LeftPad.js et à partir de votre terminal Exécutez ce qui suit:

<span>npm run build
</span>

Si tout est comme prévu, dans votre dossier public, vous devriez maintenant trouver un nouveau fichier appelé JS / LeftPad.js. Si vous ouvrez cela, vous trouverez qu'il ne contient plus de syntaxe ES6 et ressemble à ceci:

<span>"use strict";
</span>
<span>function leftPad(str<span>, len, ch</span>) {
</span>  <span>var cache = ["", " ", "  ", "   ", "    ", "     ", "      ", "       ", "        ", "         "];
</span>  str <span>= str + "";
</span>  len <span>= len - str.length;
</span>  <span>if (len   <span>if (!ch && ch !== 0) ch = " ";
</span>  ch <span>= ch + "";
</span>  <span>if (ch === " " && len     cache<span>[len] + str;
</span>  <span>};
</span>  <span>var pad = "";
</span>  <span>while (true) {
</span>    <span>if (len & 1) pad += ch;
</span>    len <span>>>= 1;
</span>    <span>if (len) ch += ch;else break;
</span>  <span>}
</span>  <span>return "" + pad + str;
</span><span>}
</span></span></span>

Organisation de votre code avec les modules ES6

Un module ES6 est un fichier JavaScript contenant des fonctions, des objets ou des valeurs primitives que vous souhaitez mettre à la disposition d'un autre fichier JavaScript. Vous exportez de l'un et importez dans l'autre. Tout projet JavaScript moderne sérieux devrait envisager d'utiliser des modules. Ils vous permettent de diviser votre code en unités autonomes et rendent ainsi les choses plus faciles à maintenir; Ils vous aident à éviter la pollution de l'espace de noms; Et ils aident à rendre votre code plus portable et réutilisable.

Bien que la majorité de la syntaxe ES6 soit largement disponible dans les navigateurs modernes, ce n'est pas encore le cas avec les modules. Au moment de la rédaction du moment de la rédaction, ils sont disponibles en Chrome, Safari (y compris la dernière version iOS) et Edge; Ils sont cachés derrière un drapeau dans Firefox et Opera; Et ils ne sont pas disponibles (et ne le seront probablement jamais) dans IE11, ni la plupart des appareils mobiles.

Dans la section suivante, nous examinerons comment nous pouvons intégrer les modules dans notre configuration de build.

Export

Le mot-clé d'exportation est ce qui nous permet de mettre nos modules ES6 à la disposition d'autres fichiers, et il nous offre deux options pour le faire - nommées et par défaut. Avec l'exportation nommée, vous pouvez avoir plusieurs exportations par module, et avec une exportation par défaut, vous n'en avez qu'un par module. Les exportations nommées sont particulièrement utiles lorsque vous devez exporter plusieurs valeurs. Par exemple, vous pouvez avoir un module contenant un certain nombre de fonctions d'utilité qui doivent être mises à disposition à divers endroits de vos applications.

Alors, transformons notre fichier LeftPad en un module, dont nous pouvons alors avoir besoin dans un deuxième fichier.

nommé Export

Pour créer une exportation nommée, ajoutez ce qui suit en bas du fichier LeftPad:

<span>npm init -y
</span>

Nous pouvons également supprimer le "Utilisation strict"; Déclaration en haut du fichier, comme les modules s'exécutent en mode strict par défaut.

Defult Export

Comme il n'y a qu'une seule fonction à exporter dans le fichier LeftPad, il pourrait en fait être un bon candidat pour utiliser la valeur par défaut d'exportation:

<span>npm install babel-cli babel-preset-env --save-dev
</span>

Encore une fois, vous pouvez supprimer le "utiliser strict"; Déclaration du haut du fichier.

import

Pour utiliser les modules exportés, nous devons maintenant les importer dans le fichier (module) dans lequel nous souhaitons les utiliser.

Pour l'option d'exportation par défaut, le module exporté peut être importé sous n'importe quel nom que vous souhaitez choisir. Par exemple, le module LeftPad peut être importé comme:

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

ou il pourrait être importé comme un autre nom, comme ainsi:

<span>"scripts": {
</span>  <span>"build": "babel src -d public"
</span><span>},
</span>

fonctionnellement, les deux fonctionneront exactement de la même manière, mais il est évidemment logique d'utiliser le même nom que l'exportation, ou quelque chose qui rend l'importation compréhensible - peut-être où le nom exporté se heurterait à un autre nom de variable qui déjà existe dans le module de réception.

Pour l'option d'exportation nommée, nous devons importer le module en utilisant le même nom qu'il a été exporté sous. Pour notre module d'exemple, nous l'importons de manière similaire à ce que nous avons utilisé avec la syntaxe par défaut d'exportation, mais dans ce cas, nous devons envelopper le nom importé avec des accolades bouclées:

<span>{
</span>  <span>"presets": [
</span>    <span>[
</span>      <span>"env",
</span>      <span>{
</span>        <span>"targets": {
</span>          <span>"browsers": ["last 2 versions", "safari >= 7"]
</span>        <span>}
</span>      <span>}
</span>    <span>]
</span>  <span>]
</span><span>}
</span>

Les accolades sont obligatoires avec une exportation nommée, et il échouera s'ils ne sont pas utilisés.

Il est possible de modifier le nom d'une exportation nommée sur l'importation si nécessaire, et pour ce faire, nous devons modifier un peu notre syntaxe à l'aide d'un [module] d'importation comme [chemin] Syntaxe. Comme pour l'exportation, il existe une variété de façons de le faire, qui sont toutes détaillées sur la page d'importation MDN.

<span>npm init -y
</span>

Encore une fois, le changement de nom est un peu insensé, mais il illustre le fait qu'ils peuvent être changés en n'importe quoi. Vous devez garder de bonnes pratiques de dénomination à tout moment, à moins bien sûr que vous écrivez des routines pour préparer des recettes sur les fruits.

Consommer le module exporté

Pour utiliser le module LeftPad exporté, j'ai créé le fichier index.js suivant dans le dossier SRC / JS. Ici, je traverse un tableau de numéros de série et je les préfixent avec des zéros pour en faire une chaîne à huit caractères. Plus tard, nous en utiliserons et les publierons sur un élément de liste ordonné sur une page HTML. Notez que cet exemple utilise la syntaxe d'exportation par défaut:

<span>npm install babel-cli babel-preset-env --save-dev
</span>

Comme nous l'avons fait plus tôt, exécutez le script de construction du répertoire :

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

Babel créera désormais un fichier index.js dans le répertoire public / js. Comme pour notre fichier LeftPad.js, vous devriez voir que Babel a remplacé toute la syntaxe ES6 et laissé derrière la syntaxe ES5. Vous pourriez également remarquer qu'il a converti la syntaxe du module ES6 en module basé sur le nœud.Exports, ce qui signifie que nous pouvons l'exécuter à partir de la ligne de commande:

<span>"scripts": {
</span>  <span>"build": "babel src -d public"
</span><span>},
</span>

Votre terminal devrait désormais déconnecter un tableau de chaînes préfixées avec des zéros pour en faire les huit caractères. Avec cela, il est temps de jeter un œil à WebPack.

Présentation de WebPack et l'intégration à Babel

Comme mentionné, les modules ES6 permettent au développeur JavaScript de diviser leur code en morceaux gérables, mais la conséquence est que ces morceaux doivent être servis au navigateur demande Serveur - quelque chose que nous devrions vraiment chercher à éviter. C'est là que WebPack entre en jeu.

WebPack est un bundler de module. Son objectif principal est de traiter votre application en traquant toutes ses dépendances, puis les emballer tous dans un ou plusieurs faisceaux qui peuvent être exécutés dans le navigateur. Cependant, cela peut être bien plus que cela, selon la façon dont il est configuré.

La configuration de WebPack est basée autour de quatre composants clés:

• un point d'entrée
• un emplacement de sortie
• chargeurs
• Plugins

Entrée: cela contient le point de départ de votre application à partir de l'endroit où WebPack peut identifier ses dépendances.

Sortie: Cela spécifie où vous aimeriez que le bundle traité soit enregistré.

chargeurs: c'est un moyen de convertir une chose comme une entrée et de générer quelque chose d'autre comme sortie. Ils peuvent être utilisés pour étendre les capacités de WebPack pour gérer plus que des fichiers JavaScript, et donc les convertir en modules valides également.

Plugins: Ceux-ci sont utilisés pour étendre les capacités de WebPack dans d'autres tâches au-delà du regroupement - telles que la minification, la libellule et l'optimisation.

Pour installer webpack, exécutez ce qui suit à partir de votre répertoire :

<span>npm init -y
</span>

Cela installe WebPack localement sur le projet, et donne également la possibilité d'exécuter WebPack à partir de la ligne de commande via l'ajout de WebPack-CLI. Vous devriez maintenant voir WebPack répertorié dans votre fichier package.json. Pendant que vous êtes dans ce fichier, modifiez la section Scripts comme suit, afin qu'il sache maintenant utiliser WebPack au lieu de Babel directement:

<span>npm install babel-cli babel-preset-env --save-dev
</span>

Comme vous pouvez le voir, ce script appelle sur un fichier webpack.config.js, alors créons cela dans notre répertoire avec le contenu suivant:

<span>"devDependencies": {
</span>  <span>"babel-cli": "^6.26.0",
</span>  <span>"babel-preset-env": "^1.6.1"
</span><span>}
</span>

Il s'agit plus ou moins du fichier de configuration le plus simple dont vous avez besoin avec WebPack. Vous pouvez voir qu'il utilise les sections entrée et de sortie décrites précédemment (il pourrait fonctionner avec ceux-ci seuls), mais contient également un mode: «développement».

WebPack a la possibilité d'utiliser des modes «développement» ou «production». Mode de réglage: le «développement» optimise pour la vitesse de construction et le débogage, tandis que le mode: «Production» optimise la vitesse d'exécution à la taille du fichier d'exécution et de sortie. Il y a une bonne explication des modes dans l'article de Tobias Koppers «WebPack 4: Mode et optimisation» si vous souhaitez en savoir plus sur la façon dont ils peuvent être configurés au-delà des paramètres par défaut.

Ensuite, supprimez tous les fichiers du dossier public / js. Puis relancez ceci:

<span>"scripts": {
</span>  <span>"build": "babel src -d public"
</span><span>},
</span>

Vous verrez qu'il contient maintenant un seul fichier ./public/bundle.js. Ouvrez le nouveau fichier, cependant, et les deux fichiers que nous avons commencé avec une apparence assez différente. Il s'agit de la section du fichier qui contient le code index.js. Même s'il est assez fortement modifié à partir de notre original, vous pouvez toujours choisir ses noms de variables:

<span>{
</span>  <span>"presets": [
</span>    <span>[
</span>      <span>"env",
</span>      <span>{
</span>        <span>"targets": {
</span>          <span>"browsers": ["last 2 versions", "safari >= 7"]
</span>        <span>}
</span>      <span>}
</span>    <span>]
</span>  <span>]
</span><span>}
</span>

Si vous exécutez le nœud public / js / bundle.js à partir du dossier , vous verrez que vous obtiendrez les mêmes résultats que nous avions auparavant.

Transpliant

Comme mentionné précédemment, les chargeurs nous permettent de convertir une chose en quelque chose d'autre. Dans ce cas, nous voulons que ES6 soit converti en ES5. Pour ce faire, nous aurons besoin de quelques packages de plus:

<span>"use strict";
</span>
<span>function leftPad(str<span>, len, ch</span>) {
</span>  <span>const cache = [
</span>    <span>"",
</span>    <span>" ",
</span>    <span>"  ",
</span>    <span>"   ",
</span>    <span>"    ",
</span>    <span>"     ",
</span>    <span>"      ",
</span>    <span>"       ",
</span>    <span>"        ",
</span>    <span>"         "
</span>  <span>];
</span>  str <span>= str + "";
</span>  len <span>= len - str.length;
</span>  <span>if (len   <span>if (!ch && ch !== 0) ch = " ";
</span>  ch <span>= ch + "";
</span>  <span>if (ch === " " && len     <span>return () => {
</span>      cache<span>[len] + str;
</span>    <span>};
</span>  <span>let pad = "";
</span>  <span>while (true) {
</span>    <span>if (len & 1) pad += ch;
</span>    len <span>>>= 1;
</span>    <span>if (len) ch += ch;
</span>    <span>else break;
</span>  <span>}
</span>  <span>return <span>`<span>${pad}</span><span>${str}</span>`</span>;
</span><span>}
</span></span></span>

pour les utiliser, la webpack.config.js a besoin d'une section de module qui y a s'ajoute après la section Output , comme ainsi:

<span>npm run build
</span>

Ceci utilise une instruction Regex pour identifier les fichiers JavaScript à transpercer avec le babel-chargedeur, tout en excluant quoi que ce soit dans le dossier node_modules à partir de cela. Enfin, le babel-chargedeur est invité à utiliser le package Babel-Preset-env installé plus tôt, pour établir les paramètres de transmission définis dans le fichier .babelrc.

avec cela fait, vous pouvez relancer ceci:

<span>"use strict";
</span>
<span>function leftPad(str<span>, len, ch</span>) {
</span>  <span>var cache = ["", " ", "  ", "   ", "    ", "     ", "      ", "       ", "        ", "         "];
</span>  str <span>= str + "";
</span>  len <span>= len - str.length;
</span>  <span>if (len   <span>if (!ch && ch !== 0) ch = " ";
</span>  ch <span>= ch + "";
</span>  <span>if (ch === " " && len     cache<span>[len] + str;
</span>  <span>};
</span>  <span>var pad = "";
</span>  <span>while (true) {
</span>    <span>if (len & 1) pad += ch;
</span>    len <span>>>= 1;
</span>    <span>if (len) ch += ch;else break;
</span>  <span>}
</span>  <span>return "" + pad + str;
</span><span>}
</span></span></span>

Vérifiez ensuite le nouveau public / js / bundle.js et vous verrez que toutes les traces de la syntaxe ES6 ont disparu, mais elle produit toujours la même sortie que précédemment.

L'apporter au navigateur

Ayant construit une configuration WebPack et Babel fonctionnant, il est temps d'apporter ce que nous avons fait au navigateur. Un petit fichier HTML est nécessaire, et cela doit être créé dans le dossier comme ci-dessous:

<span>npm init -y
</span>

Il n'y a rien de compliqué. Les principaux points à noter sont l'élément , où le tableau des nombres ira, et l'élément juste avant la balise de fermeture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!