React
Installation

Einfaches Setup

Ordner einrichten

In diesem Beispiel wird davon out/ dass sich der Code in src/ und die Ausgabe in out/ . Daher sollte die Ordnerstruktur ungefähr so ​​aussehen

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

Pakete einrichten

Unter der Annahme einer npm-Setup-Umgebung müssen wir zunächst babel einrichten, um den React-Code in einen es5-kompatiblen Code umzuwandeln.

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

Der obige Befehl weist npm an, die Core-Babel-Bibliotheken sowie das Loader-Modul für die Verwendung mit Webpack zu installieren. Wir installieren auch die es6 und reagieren auf die Voreinstellungen von babel, um den Code des JSX- und es6-Moduls zu verstehen. (Weitere Informationen zu den Presets finden Sie hier: Babel-Presets. )

$npm i -D webpack

Dieser Befehl installiert Webpack als Entwicklungsabhängigkeit. ( Ich bin die Abkürzung für install und -D die Abkürzung für --save-dev)

Möglicherweise möchten Sie auch zusätzliche Webpack-Pakete installieren (z. B. zusätzliche Ladeprogramme oder die Erweiterung webpack-dev-server).

Zuletzt benötigen wir den eigentlichen Reaktionscode

$npm i -D react react-dom

Webpack einrichten

Bei der Einrichtung der Abhängigkeiten benötigen wir eine Datei webpack.config.js, um webpack mitzuteilen, was zu tun ist

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

Diese Datei teilt webpack mit der index.js Datei (angenommen, dass in src /) und wandeln sie in eine einzige bundle.js Datei im starten out - Verzeichnis.

Der module teilt webpack alle Dateien gegen den regulären Ausdruck angetroffen zu testen und wenn sie übereinstimmen, wird die angegebene Lader aufrufen. ( babel-loader in diesem Fall) Darüber hinaus ist die exclude regex webpack erzählt für alle Module in der diese speziellen Lader zu ignorieren node_modules Ordner, hilft dies den transpilation Prozess zu beschleunigen. Schließlich informiert die query webpack, welche Parameter an babel übergeben werden, und wird verwendet, um die zuvor installierten Voreinstellungen weiterzugeben.

Setup testen

Jetzt müssen Sie nur noch die Datei src/index.js erstellen und die Anwendung packen

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

Diese Datei würde normalerweise einen einfachen <h1>Hello world!</h1> -Header mit der ID 'app' in das html-Tag einfügen, aber für den Moment sollte es ausreichen, den Code einmal zu transpilieren.

$./node_modules/.bin/webpack . Führt die lokal installierte Version von Webpack aus (verwenden Sie $webpack wenn Sie Webpack global mit -g installiert haben)

Dies sollte die Datei out/bundle.js mit dem darin enthaltenen Code erstellen und schließt das Beispiel ab.

Webpack-dev-server verwenden

Konfiguration

Nachdem Sie ein einfaches Projekt für die Verwendung von Webpacks erstellt haben, wird Babel and Rea mit der Ausgabe von $npm i -g webpack-dev-server den Entwicklungs-HTTP-Server zur schnelleren Entwicklung installieren.

Webpack.config.js ändern

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

Die Modifikationen sind in

• output.publicPath der einen Pfad für die output.publicPath unseres Bundles festlegt (weitere Informationen finden Sie in den Webpack-Konfigurationsdateien )

• devServer

  • contentBase den contentBase für statische Dateien (zum Beispiel index.html )
  • hot setzt den webpack-dev-server auf hot reload, wenn Änderungen an Dateien auf der Festplatte vorgenommen werden

Und zum Schluss brauchen wir nur eine einfache index.html, um unsere App zu testen.

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>

Mit diesem Setup sollte $webpack-dev-server einen lokalen http-Server an Port 8080 starten und beim Verbinden eine Seite mit einer <h1>Hello world!</h1> rendern.