React
Come configurare un webpack di base, reagire e fare i babel dell'ambiente

Osservazioni

Come costruire una pipeline per un "Hello world" personalizzato con immagini.

Passaggio 1: Installa Node.js

La pipeline di generazione che si sta costruendo si basa su Node.js, pertanto è necessario accertarsi in prima istanza che sia installato. Per istruzioni su come installare Node.js è possibile eseguire il checkout dei documenti SO per questo qui

Passaggio 2: inizializzare il progetto come modulo nodo

Aprire la cartella del progetto sulla riga di comando e utilizzare il seguente comando:

npm init

Ai fini di questo esempio, puoi sentirti libero di prendere i valori predefiniti o se desideri maggiori informazioni su ciò che significa tutto questo, puoi controllare questo documento SO sull'impostazione della configurazione del pacchetto.

Passaggio 3: installare i pacchetti npm necessari

Eseguire il seguente comando sulla riga di comando per installare i pacchetti necessari per questo esempio:

npm install --save react react-dom

Quindi, per le dipendenze dello sviluppatore, esegui questo comando:

npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader 

Infine, webpack e webpack-dev-server sono cose che vale la pena installare a livello globale piuttosto che come dipendenza del tuo progetto, se preferisci aggiungerlo come dipendenza a cui funzionerà, io no. Ecco il comando da eseguire:

npm install --global webpack webpack-dev-server 

Passaggio 3: aggiungere un file .babelrc alla radice del progetto

Questo imposterà babel per usare i preset che hai appena installato. Il tuo file .babelrc dovrebbe assomigliare a questo:

{
  "presets": ["react", "es2015"]
}

Passaggio 4: installazione della struttura della directory del progetto

Imposta te stesso una struttura di directory che assomiglia al seguente nella radice della tua directory:

|- node_modules
|- src/
  |- components/
  |- images/
  |- styles/
  |- index.html
  |- index.jsx
|- .babelrc
|- package.json

NOTA: node_modules , .babelrc e package.json dovrebbero essere già tutti presenti nei precedenti passaggi che ho appena incluso, in modo da poter vedere dove si adattano.

Passaggio 5: compilare il progetto con i file di progetto Hello World

Questo non è molto importante per il processo di costruzione di una pipeline, quindi ti fornirò il codice per questi ed è possibile copiarli incollandoli in:

src / componenti / HelloWorldComponent.jsx

import React, { Component } from 'react';

class HelloWorldComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'Student'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({name: e.target.value});
  }

  render() {
    return (
      <div>
        <div className="image-container">
          <img src="./images/myImage.gif" />
        </div>
        <div className="form">
          <input type="text" onChange={this.handleChange} />
          <div>
            My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
          </div>
        </div>
      </div>
    );
  }
}

export default HelloWorldComponent;

src / images / myImage.gif

Sentiti libero di sostituirlo con qualsiasi immagine che desideri sia semplicemente lì per dimostrare che possiamo anche riunire le immagini. Se fornisci la tua immagine e la dai un nome diverso, dovrai aggiornare HelloWorldComponent.jsx per riflettere le tue modifiche. Allo stesso modo, se si sceglie un'immagine con un'estensione di file diversa, è necessario modificare la proprietà di test del caricatore di immagini nel webpack.config.js con la regex appropriata in modo che corrisponda alla nuova estensione del file.

src / stili / styles.css

.form {
  margin: 25px;
  padding: 25px;
  border: 1px solid #ddd;
  background-color: #eaeaea;
  border-radius: 10px;
}

.form div {
  padding-top: 25px;
}

.image-container {
  display: flex;
  justify-content: center;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning to build a react pipeline</title>
</head>
<body>
  <div id="content"></div>
  <script src="app.js"></script>
</body>
</html>

index.jsx

import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';

require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');

render(<HelloWorldComponent />, document.getElementById('content'));

Passaggio 6: creare la configurazione del Webpack

Crea un file chiamato webpack.config.js nella radice del tuo progetto e copia questo codice in esso:

webpack.config.js

var path = require('path');

var config = {
  context: path.resolve(__dirname + '/src'),
  entry: './index.jsx',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname + '/dist'),
  },
  devServer: {
    contentBase: path.join(__dirname + '/dist'),
    port: 3000,
    open: true,
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: "style!css"
      },
      {
        test: /\.gif$/,
        loaders: [
          'file?name=[path][name].[ext]',
          'image-webpack',
        ]
      },
      { test: /\.(html)$/,
        loader: "file?name=[path][name].[ext]"
      }
    ],
  },
};

module.exports = config;

Passaggio 7: creare attività npm per la pipeline

Per fare ciò è necessario aggiungere due proprietà alla chiave di script del JSON definita nel file package.json nella radice del progetto. Rendi la tua chiave di script simile a questa:

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Lo script di test sarà già stato lì e puoi scegliere se tenerlo o no, non è importante per questo esempio.

Passaggio 8: utilizzare la pipeline

Dalla riga di comando, se ci si trova nella directory root del progetto, ora si dovrebbe essere in grado di eseguire il comando:

npm run build

Questo raggrupperà la piccola applicazione che hai creato e la inserirà nella directory dist/ che creerà nella root della cartella del tuo progetto.

Se si esegue il comando:

npm start

Quindi l'applicazione che hai creato verrà pubblicata nel tuo browser Web predefinito all'interno di un'istanza del server di sviluppo webpack.