Webpack, React et ES6

⏲️ ~10 min de lecture

Publié le 16/03/2015 par Adrien
Astuces Développement DevOps

Dans ce petit tutorial, nous allons mettre en place un projet React en ECMAScript 6 à l'aide de Webpack et de Babel.

La structure du projet #

L'objectif sera donc d'obtenir un environnement de développement qui transpilera automatiquement notre code ES6 en ES5, résoudra les dépendances de nos fichiers, gerera un serveur statique, l'auto-reload de notre navigateur et enfin nous permettra l'utilisation de préprocesseurs CSS (ici SASS).

La structure de notre projet (Un repository github avec le code du tutorial):

build/
    index.html
src/
    app.jsx
    home.jsx
    stylesheets/
        styles.scss
package.json
webpack.config.js

Et les différents fichiers que j'utilise pour vérifier le bon fonctionnement de notre environnement :

app.jsx

require("../stylesheets/styles.scss");

import React from "react";
import Home from "./home.jsx";

React.render(<Home name="Adrien" />, document.getElementById("main"));

home.jsx

import React from "react";

export default class Home extends React.Component {
  render() {
    return <div>Hello {this.props.name}!</div>;
  }
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <section id="main"></section>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

styles.scss

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "_bootstrap.scss";

Les dépendances #

Bon pas de secret, on va utiliser npm.

npm init

Pour Webpack

npm install webpack webpack-dev-server --save-dev

Pour React

npm install react@0.13.0-rc1 --save-dev

Vous noterez que nous utilisons une version release candidate de React. Celle-ci apporte un détail plus que notable pour les utilisateurs d'ES6 que nous sommes : l'apport de classes ES6 ready !
Vous pouvez en voir l'utilisation basique dans les exemples de code au dessus :

export default class Home extends React.Component

Si vous lisez ce tuto et que la version 0.13 de react est déjà sortie (ou même de l'histore ancienne), utilisez bien sûr la dernière version stable : npm install react --save-dev.

Pour la gestion de l'ES6: le loader Babel

npm install babel-loader babel-runtime --save-dev

Babel (anciemment 6to5) est un transpileur Javascript qui transforme votre code ES6 en code ES5 utilisable dans les navigateurs actuels.
Quand à babel-runtime, il permet d'éviter la duplication des helpers Babel qui sont présents dans chacun de nos fichiers avec une configuration par défaut en injectant ce module qui sera requis par nos différents fichiers à la place de l'injection en dur. (http://babeljs.io/docs/usage/runtime/)

Pour nos stylesheets :

npm install bootstrap-sass css-loader sass-loader style-loader url-loader --save-dev

Vous pouvez vous passer de bootstrap bien entendu :). Ici le loader sass va s'occuper de convertir notre style sass en css, le loader css va se charger de le parser et style-loader va l'injecter dans votre page html. Le loader url va être utile afin de charger les différents fichiers utiles de bootstrap comme les fonts.

Votre package.json devrait ressembler à ceci :

{
  "name": "boilerplate",
  "version": "0.0.1",
  "devDependencies": {
    "babel-core": "^4.4.6",
    "babel-loader": "^4.0.0",
    "babel-runtime": "^4.4.6",
    "bootstrap-sass": "^3.3.3",
    "css-loader": "^0.9.1",
    "sass-loader": "^0.4.0-beta.1",
    "style-loader": "^0.8.3",
    "url-loader": "^0.5.5",
    "webpack": "^1.5.3",
    "webpack-dev-server": "^1.7.0",
    "react": "^0.13.0-rc1"
  }
}

On configure ! #

On va maintenant configurer webpack pour utiliser tout ce beau monde, cela se passe dans le fichier webpack.config.js.

// webpack.config.js
var path = require("path");
var node_modules = path.resolve(__dirname, "node_modules");
var pathToReact = path.resolve(node_modules, "react/dist/react.min.js");

var config = {
  entry: path.resolve(__dirname, "src/client/js/app.jsx"),
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  resolve: {
    alias: {
      react: pathToReact
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader?stage=1&optional=runtime"
      },
      {
        test: /\.scss$/,
        loader:
          "style!css!sass?outputStyle=expanded=includePaths[]=" +
          node_modules +
          "/bootstrap-sass/assets/stylesheets/"
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      }
    ],
    noParse: [pathToReact]
  }
};

module.exports = config;

Point par point :

entry : c'est le point d'entrée de votre application.
outpout : le dossier de sortie et le nom du fichier à générer.
resolve : un petit alias afin d'utiliser la version minifiée de React lors des import 'react'.
module les différentes options.
loader : c'est ici que l'on met en place nos différents loader
noParse : permet de ne pas parser certains fichiers pour gagner en performance.

Concernant les loaders : le premier estresponsables de la transformation de notre code ES6 en ES5 et également du jsx. On n'oublie pas d'exclure le dossier node_module afin d'éviter de parser des fichiers inutilements. (https://github.com/babel/babel-loader#babel-loader-is-slow)

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader?stage=1&optional=runtime'
},

le suivant est responsable de nos stylesheets :

{
    test: /\.scss$/,
    loader: "style!css!sass?outputStyle=expanded=includePaths[]=" + node_modules + "/bootstrap-sass/assets/stylesheets/"
},

Les paramètres du sass-loader, outputStyle et includedPaths[] permettent respectivement de rendre le css généré plus lisible et d'inclure des librairies externes, ici bootstrap.

Le dernier loader :

{
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000'
}

Permet à bootstrap de pouvoir importer les différentes fonts et icones qu'il utilise.

À ce moment, si vous exécutez la commande webpack, votre fichier bundle.js devrait être généré dans le dossier build. Vous pouvez ouvrir le fichier index.html dans votre navigateur et admirer fièrement votre application vous dire bonjour ! (Bon à condition de changer la propriété name dans le fichier app.jsx)

On va mettre en place un dernier outil. Vous vous souvenez que je vous ai fait installer webpack-dev-server au début de ce tutorial ? Et bien on va s'en servir du bougre !

Pour cela, rien de plus facile, on va ajouter un script à notre npm afin de pour le lancer facilement :

"scripts": {
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
},

Vous n'avez plus qu'à utiliser la commande

npm run dev

pour lancer le tout !

Ouvrez maintenant votre navigateur à l'adresse http://127.0.0.1:8080 et devant vos yeux ébahis, l'application s'affiche.

Bon c'est bien mais sa apporte quoi au final ?

Bonne question ! Essayez de changer la propriété name dans le fichier app.jsx pour voir. Webpack va automatiquement recompiler votre bundle (et grâce à notre configuration, en vitesse, car il ne prend en compte que les fichiers modifiés), et rafraichir votre navigateur !
Et oui grâce au script que l'on insère dans le fichier index.html

<script src="http://localhost:8080/webpack-dev-server.js"></script>

celui-ci se rafraichit automatiquement en cas de modifications.

Nous voici donc maintenant avec un environnement de développement qui transpile notre code ES6, met à jour automatiquement nos modifications dans notre navigateur. Les possibilités de Webpack sont plutôt étendues, alors n'hésitez pas à rajouter des fonctionnalités pour améliorer votre workflow. Il va devenir votre meilleur ami !

Cet article vous a plu ? Sachez que nous recrutons !

← Accueil