React
Einrichten eines grundlegenden Webpacks, Reagieren und Babel-Umgebung

Bemerkungen

Erstellen einer Pipeline für eine angepasste "Hallo Welt" mit Bildern.

Schritt 1: Installieren Sie Node.js

Die Build-Pipeline, die Sie erstellen, basiert auf Node.js. Sie müssen also zunächst sicherstellen, dass Sie diese installiert haben. Eine Anleitung, wie installieren Node.js Sie die SO - Dokumentation für diese Prüfung können hier

Schritt 2: Initialisieren Sie Ihr Projekt als Knotenmodul

Öffnen Sie Ihren Projektordner in der Befehlszeile und verwenden Sie den folgenden Befehl:

npm init

Für die Zwecke dieses Beispiels können Sie die Standardeinstellungen übernehmen oder wenn Sie weitere Informationen dazu benötigen, was dies bedeutet, können Sie dieses SO-Dokument beim Einrichten der Paketkonfiguration überprüfen.

Schritt 3: Installieren Sie die erforderlichen npm-Pakete

Führen Sie den folgenden Befehl in der Befehlszeile aus, um die für dieses Beispiel erforderlichen Pakete zu installieren:

npm install --save react react-dom

Dann für die Dev-Abhängigkeiten diesen Befehl ausführen:

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

Schließlich sind webpack und webpack-dev-server Dinge, die es wert sind, global installiert zu werden, und nicht als Abhängigkeit von Ihrem Projekt. Wenn Sie es lieber als Abhängigkeit hinzufügen möchten, funktioniert das, ich tue es nicht. Hier ist der Befehl zum Ausführen:

npm install --global webpack webpack-dev-server 

Schritt 3: Fügen Sie dem Stamm Ihres Projekts eine .babelrc-Datei hinzu

Dadurch wird Babel so eingerichtet, dass die gerade installierten Voreinstellungen verwendet werden. Ihre .babelrc-Datei sollte folgendermaßen aussehen:

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

Schritt 4: Projektverzeichnisstruktur einrichten

Richten Sie sich eine Verzeichnisstruktur ein, die im Stammverzeichnis Ihres Verzeichnisses wie folgt aussieht:

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

HINWEIS: Die node_modules , .babelrc und package.json sollten bereits in den vorherigen Schritten vorhanden gewesen sein. Ich habe sie nur node_modules , damit Sie sehen können, wo sie passen.

Schritt 5: Füllen Sie das Projekt mit den Hello World-Projektdateien

Dies ist nicht wirklich wichtig für den Aufbau einer Pipeline. Ich gebe Ihnen einfach den Code für diese und Sie können sie kopieren und einfügen:

src / components / 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 / meinImage.gif

Fühlen Sie sich frei, dies durch jedes Bild zu ersetzen, das Sie möchten, es ist einfach da, um zu beweisen, dass wir auch Bilder bündeln können. Wenn Sie Ihr eigenes Bild angeben und es anders benennen, müssen Sie die HelloWorldComponent.jsx aktualisieren, um Ihre Änderungen widerzuspiegeln. Ebenso , wenn Sie ein Bild mit einer anderen Dateierweiterung wählen , dann müssen Sie das ändern test Eigenschaft des Bildes Lader in den webpack.config.js mit entsprechenden regulären Ausdruck Ihrer neuen Dateierweiterung übereinstimmen ..

src / styles / 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'));

Schritt 6: Erstellen Sie eine Webpack-Konfiguration

Erstellen Sie eine Datei mit dem Namen webpack.config.js im Stammverzeichnis Ihres Projekts, und kopieren Sie diesen Code hinein:

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;

Schritt 7: Erstellen Sie npm-Aufgaben für Ihre Pipeline

Dazu müssen Sie dem Scripts-Schlüssel des JSON, der in der Datei package.json im Stammverzeichnis Ihres Projekts definiert ist, zwei Eigenschaften hinzufügen. Machen Sie Ihren Skriptschlüssel so aussehen:

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

Das test bereits vorhanden und Sie können auswählen, ob Sie es behalten möchten oder nicht. Dies ist für dieses Beispiel nicht wichtig.

Schritt 8: Verwenden Sie die Pipeline

Wenn Sie sich in der Befehlszeile im Projektstammverzeichnis befinden, sollten Sie jetzt den Befehl ausführen können:

npm run build

Dadurch wird die von Ihnen erstellte kleine Anwendung gebündelt und in dem Verzeichnis dist/ , das sie im Stammverzeichnis Ihres Projektordners erstellt.

Wenn Sie den Befehl ausführen:

npm start

Die von Ihnen erstellte Anwendung wird dann in Ihrem Standard-Webbrowser in einer Webpack-Dev-Serverinstanz bereitgestellt.