React
Installation

Configuration simple

Configuration des dossiers

Cet exemple suppose que le code est dans src/ et que la sortie doit être out/ . En tant que telle, la structure des dossiers devrait ressembler à

example/
|-- src/
|   |-- index.js
|   `-- ...
|-- out/
`-- package.json

Mise en place des packages

En supposant un environnement npm d'installation, nous devons d'abord configurer babel afin de transposer le code React dans un code conforme à es5.

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

La commande ci-dessus indiquera à npm d'installer les bibliothèques principales de Babel ainsi que le module de chargement à utiliser avec webpack. Nous installons également les es6 et les presets de réaction pour que babel comprenne le code du module JSX et es6. (Plus d'informations sur les presets peuvent être trouvés ici Presets Babel )

$npm i -D webpack

Cette commande installera webpack en tant que dépendance de développement. ( je suis le raccourci pour installer et -D le raccourci pour --save-dev)

Vous pouvez également installer d'autres packages Webpack (tels que des chargeurs supplémentaires ou l'extension webpack-dev-server).

Enfin, nous aurons besoin du code de réaction actuel

$npm i -D react react-dom

Mise en place du webpack

Avec la configuration des dépendances, nous aurons besoin d'un fichier webpack.config.js pour indiquer quoi faire à webpack

webpack.config.js simple:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

Ce fichier demande à webpack de démarrer avec le fichier index.js (supposé être dans src /) et de le convertir en un seul fichier bundle.js dans le répertoire out .

Le bloc module indique à webpack de tester tous les fichiers rencontrés sur l'expression régulière et, s'ils correspondent, invoque le chargeur spécifié. ( babel-loader dans ce cas) En outre, le regex l' exclude indique à webpack d'ignorer ce chargeur spécial pour tous les modules du dossier node_modules , ce qui accélère le processus de transpilation. Enfin, l'option query indique à webpack les paramètres à transmettre à babel et permet de transmettre les presets installés précédemment.

Tester la configuration

Il ne reste plus qu'à créer le fichier src/index.js et essayer de src/index.js l'application

src / index.js:

'use strict'

import React from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>Hello world!</h1>
}

render(
  <App />,
  document. getElementById('app')
)

Ce fichier devrait normalement afficher un simple en-tête <h1>Hello world!</h1> dans la balise html avec l'identifiant "app", mais pour le moment, cela devrait suffire à transposer le code une fois.

$./node_modules/.bin/webpack . Exécutera la version installée localement de webpack (utilisez $webpack si vous avez installé globalement Webpack avec -g)

Cela devrait créer le fichier out/bundle.js avec le code transpiled à l'intérieur et conclure l'exemple.

Utiliser webpack-dev-server

Installer

Après avoir configuré un projet simple pour utiliser webpack, babel et réagir en émettant $npm i -g webpack-dev-server installera le serveur http de développement pour un développement plus rapide.

Modification de webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

Les modifications sont dans

• output.publicPath qui configure un chemin d'accès output.publicPath lequel notre bundle doit être servi (voir les fichiers de configuration Webpack pour plus d'informations)

• devServer

  • contentBase le chemin de base pour servir les fichiers statiques (par exemple index.html )
  • hot définit le serveur webpack-dev pour recharger à chaud lorsque des modifications sont apportées aux fichiers sur le disque

Et enfin, nous avons juste besoin d'un index.html simple pour tester notre application.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

Avec cette configuration exécutant $webpack-dev-server devrait démarrer un serveur http local sur le port 8080 et lors de la connexion devrait rendre une page contenant un <h1>Hello world!</h1> .