React Installazione semplice


Esempio

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.