React
Installazione

Installazione semplice

Impostazione delle cartelle

Questo esempio presuppone che il codice sia in src/ e l'output da inserire in out/ . In quanto tale, la struttura della cartella dovrebbe essere simile

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

Impostazione dei pacchetti

Supponendo un ambiente di setup npm, abbiamo prima bisogno di configurare babel per traspondere il codice React in codice es5 compatibile.

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

Il comando precedente istruirà npm per installare le librerie core babel e il modulo loader da utilizzare con webpack. Installiamo anche es6 e reagiamo i preset per babel per capire il codice del modulo JSX ed es6. (Ulteriori informazioni sui preset sono disponibili qui Preselezioni di Babel )

$npm i -D webpack

Questo comando installerà webpack come dipendenza di sviluppo. ( io sono la scorciatoia per l'installazione e -D la stenografia per --save-dev)

Potresti anche voler installare pacchetti webpack aggiuntivi (come caricatori aggiuntivi o l'estensione webpack-dev-server)

Infine, avremo bisogno del codice di reazione effettivo

$npm i -D react react-dom

Configurare il webpack

Con l'installazione delle dipendenze avremo bisogno di un file webpack.config.js per dire al webpack cosa fare

semplice webpack.config.js:

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']
        }
      }
    ]
  }
};

Questo file dice al webpack di iniziare con il file index.js (presumibilmente in src /) e convertirlo in un singolo file bundle.js nella directory out .

Il blocco del module dice a webpack di testare tutti i file incontrati sull'espressione regolare e, se corrispondono, richiamerà il loader specificato. ( babel-loader in questo caso) Inoltre, la regex exclude dice al webpack di ignorare questo caricatore speciale per tutti i moduli nella cartella node_modules , questo aiuta ad accelerare il processo di transpilation. Infine, l'opzione query dice a webpack quali parametri passare a babel e viene utilizzato per passare i preset che abbiamo installato in precedenza.

Test della configurazione

Tutto ciò che rimane ora è creare il file src/index.js e provare a riempire l'applicazione

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')
)

Questo file normalmente renderebbe un semplice <h1>Hello world!</h1> Header nel tag html con l'id 'app', ma per ora dovrebbe essere sufficiente per traspolare il codice una volta.

$./node_modules/.bin/webpack . Eseguirà la versione localmente installata del webpack (usa $webpack se hai installato il webpack a livello globale con -g)

Questo dovrebbe creare il file out/bundle.js con il codice transpiled all'interno e conclude l'esempio.

Utilizzo di webpack-dev-server

Impostare

Dopo aver impostato un semplice progetto per usare il webpack, babel e reagire con l'emissione di $npm i -g webpack-dev-server installerà il server di sviluppo http per uno sviluppo più rapido.

Modifica di 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
  }
};

Le modifiche sono in

• output.publicPath che imposta un percorso per l'invio del pacchetto (vedere i file di configurazione di Webpack per maggiori informazioni)

• devServer

  • contentBase del percorso di base per servire file statici (ad esempio index.html )
  • hot imposta il webpack-dev-server su hot reload quando le modifiche vengono apportate ai file sul disco

E alla fine abbiamo solo bisogno di un semplice index.html per testare la nostra app in.

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>

Con questa configurazione in esecuzione $webpack-dev-server dovrebbe avviare un server http locale sulla porta 8080 e al momento della connessione dovrebbe eseguire il rendering di una pagina contenente un <h1>Hello world!</h1> .