React
Installation

Enkel installation

Ställa in mapparna

Detta exempel antar att koden är i src/ och den utgång som ska läggas out/ . Som sådan bör mappstrukturen se ut något

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

Ställa in paketen

Om vi antar en miljö för installationen per minut måste vi först ställa in babel för att transponera React-koden till es5-kompatibel kod.

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

Ovanstående kommando instruerar npm att installera kärnbabelbiblioteken såväl som loader-modulen för användning med webpack. Vi installerar också es6 och reaktionsförinställningar för babel för att förstå JSX- och es6-modulkoden. (Mer information om förinställningarna finns här Babel-förinställningar )

$npm i -D webpack

Detta kommando installerar webpack som ett utvecklingsberoende. ( jag är korthaven för installation och -D korthandeln för - spara-dev)

Du kanske också vill installera ytterligare webpack-paket (till exempel extra laddare eller webpack-dev-server-förlängningen)

Slutligen kommer vi att behöva den faktiska reaktionskoden

$npm i -D react react-dom

Ställa in webbpakke

Med beroendekonfigurationen behöver vi en webpack.config.js-fil för att berätta för webpack vad vi ska göra

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

Denna fil ber webbpack att börja med index.js-filen (antas vara i src /) och konvertera den till en enda bundle.js-fil i out katalogen.

Den module blocket berättar Webpack att testa alla filer som uppstått mot det reguljära uttrycket och om de matchar, kommer att åberopa den angivna lastaren. ( babel-loader i detta fall) Dessutom exclude regex berättar Webpack att ignorera denna speciella lastare för alla moduler i node_modules mappen hjälper denna hastighet upp transpilation processen. Slutligen query berättar alternativet Webpack vilka parametrar som ska skickas till babel och används för att passera längs förinställningarna Vi installerade tidigare.

Testa installationen

Allt som återstår nu är att skapa src/index.js filen och försöka packa applikationen

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

Denna fil ger normalt en enkel <h1>Hello world!</h1> Rubrik i html-taggen med id-appen, men för tillfället borde det räcka för att transpilera koden en gång.

$./node_modules/.bin/webpack . Kommer att köra den lokalt installerade versionen av webpack (använd $webpack om du installerade webpack globalt med -g)

Detta bör skapa filen out/bundle.js med den transpilerade koden inuti och avslutar exemplet.

Använda webpack-dev-server

Uppstart

Efter att ha installerat ett enkelt projekt för att använda webpack, babel och reagera utfärdande $npm i -g webpack-dev-server kommer att installera utvecklings http-servern för snabbare utveckling.

Ändra webpack.config.js

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

Ändringarna är i

• output.publicPath som sätter upp en sökväg för att servera vårt paket från (se Webpack-konfigurationsfiler för mer information)

• devServer

  • contentBase statiska filer från (till exempel index.html )
  • hot ställer in webpack-dev-servern till het omladdning när ändringar görs på filer på disken

Och slutligen behöver vi bara ett enkelt index.html för att testa vår app i.

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>

Med den här installationen $webpack-dev-server starta en lokal http-server på port 8080 och vid anslutning bör en sida innehålla en <h1>Hello world!</h1> .