React
Installatie

Eenvoudige installatie

Mappen instellen

In dit voorbeeld wordt ervan uitgegaan dat code in src/ en de uitvoer in out/ . Als zodanig moet de mappenstructuur er ongeveer zo uitzien

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

Pakketten instellen

Uitgaande van een setup-npm-omgeving, moeten we eerst babel instellen om de React-code te transponeren naar een code die voldoet aan es5.

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

De bovenstaande opdracht zal npm instrueren om de kernbabelbibliotheken en de laadmodule te installeren voor gebruik met webpack. We installeren ook de es6 en reageren voorinstellingen voor babel om de JSX- en es6-modulecode te begrijpen. (Meer informatie over de voorinstellingen vindt u hier Babel-voorinstellingen )

$npm i -D webpack

Met deze opdracht wordt webpack geïnstalleerd als een ontwikkelingsafhankelijkheid. ( i is de afkorting voor installeren en -D de afkorting voor --save-dev)

Mogelijk wilt u ook aanvullende webpack-pakketten installeren (zoals extra laders of de webpack-dev-server-extensie)

Ten slotte hebben we de eigenlijke reactcode nodig

$npm i -D react react-dom

Webpack instellen

Met de afhankelijkheden setup hebben we een webpack.config.js bestand nodig om webpack te vertellen wat te doen

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

Dit bestand vertelt webpack om te beginnen met het bestand index.js (verondersteld in src / te zijn) en het te converteren naar een enkel bundle.js-bestand in de map out .

De module blok vertelt webpack alle bestanden aangetroffen ten opzichte van de reguliere expressie te testen en als ze overeenkomen, is de opgegeven lader te roepen. (in dit geval babel-loader ) Verder zegt de exclude regex dat webpack deze speciale loader voor alle modules in de map node_modules , dit helpt het transpilatieproces te versnellen. Ten slotte is de query optie vertelt webpack welke parameters door te geven aan babel en wordt gebruikt om langs de voorinstellingen die we eerder geïnstalleerd.

Setup testen

U src/index.js bestand src/index.js te maken en de toepassing in te pakken

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

Dit bestand geeft normaal gesproken een eenvoudige <h1>Hello world!</h1> Koptekst in de html-tag met de id 'app', maar voorlopig zou het voldoende moeten zijn om de code eenmaal te transpileren.

$./node_modules/.bin/webpack . Zal de lokaal geïnstalleerde versie van webpack uitvoeren (gebruik $webpack als u webpack wereldwijd met -g hebt geïnstalleerd)

Dit zou het bestand out/bundle.js moeten maken met de transpiled-code erin en het voorbeeld afsluiten.

Webpack-dev-server gebruiken

Opstelling

Na het opzetten van een eenvoudig project om webpack te gebruiken, zal babel en reageren door $npm i -g webpack-dev-server de development http $npm i -g webpack-dev-server installeren voor snellere ontwikkeling.

Webpack.config.js wijzigen

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

De wijzigingen zijn binnen

• output.publicPath dat een pad instelt om onze bundel te laten output.publicPath (zie Webpack-configuratiebestanden voor meer info)

• devServer

  • contentBase het contentBase statische bestanden worden weergegeven (bijvoorbeeld index.html )
  • hot stelt de webpack-dev-server in op hot reload wanneer wijzigingen worden aangebracht in bestanden op schijf

En tot slot hebben we gewoon een eenvoudige index.html nodig om onze app te 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>

Met deze instelling zou $webpack-dev-server een lokale http $webpack-dev-server moeten starten op poort 8080 en bij het verbinden een pagina weergeven met een <h1>Hello world!</h1> .