React
Instalacja

Prosta konfiguracja

Konfigurowanie folderów

W tym przykładzie założono, że kod znajduje się w src/ a wyjście należy umieścić w out/ . W związku z tym struktura folderów powinna wyglądać mniej więcej tak

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

Konfigurowanie pakietów

Zakładając środowisko instalacyjne npm, najpierw musimy skonfigurować babel, aby transpilować kod React do kodu zgodnego z es5.

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

Powyższe polecenie poinstruuje npm, aby zainstalował podstawowe biblioteki babel, a także moduł ładujący do użycia z webpackiem. Instalujemy również es6 i reagujemy na ustawienia wstępne dla Babel, aby zrozumieć kod modułu JSX i es6. (Więcej informacji na temat ustawień wstępnych można znaleźć tutaj Ustawienia wstępne Babel )

$npm i -D webpack

To polecenie zainstaluje pakiet WWW jako zależność programistyczną. ( i to skrót dla instalacji, a -D skrót dla --save-dev)

Możesz także zainstalować dodatkowe pakiety webpacka (takie jak dodatkowe programy ładujące lub rozszerzenie webpack-dev-server)

Wreszcie będziemy potrzebować rzeczywistego kodu reagowania

$npm i -D react react-dom

Konfigurowanie pakietu internetowego

Po skonfigurowaniu zależności będziemy potrzebować pliku webpack.config.js, aby powiedzieć webpackowi, co ma robić

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

Plik ten informuje WebPACK na początek pliku index.js (zakłada się, że w src /) i przekształcić go w jednym pliku bundle.js na out katalogu.

Blok module mówi webpackowi, aby przetestował wszystkie napotkane pliki pod kątem wyrażenia regularnego i jeśli pasują, wywoła określony moduł ładujący. (w tym przypadku babel-loader ) Ponadto wyrażenie regularne exclude nakazuje webpackowi zignorowanie tego specjalnego modułu ładującego dla wszystkich modułów w folderze node_modules , co pomaga przyspieszyć proces transpilacji. Na koniec opcja query informuje webpack, jakie parametry przekazać do babel, i jest używana do przekazywania ustawień wstępnych, które wcześniej zainstalowaliśmy.

Testowanie konfiguracji

Pozostało już tylko utworzyć plik src/index.js i spróbować spakować aplikację

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

Ten plik normalnie renderowałby prosty nagłówek <h1>Hello world!</h1> w tagu html z identyfikatorem „app”, ale na razie powinno wystarczyć jednorazowe przełożenie kodu.

$./node_modules/.bin/webpack . Wykona lokalnie zainstalowaną wersję pakietu (użyj $webpack jeśli zainstalowałeś pakiet globalnie z opcją -g)

To powinno utworzyć plik out/bundle.js z transpilowanym kodem w środku i zakończyć przykład.

Korzystanie z serwera webpack-dev-server

Ustawiać

Po skonfigurowaniu prostego projektu do korzystania z webpacka, babel i zareagowanie na wydanie $npm i -g webpack-dev-server zainstaluje programistyczny serwer http dla szybszego rozwoju.

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

Modyfikacje są w

• output.publicPath który ustawia ścieżkę, z której nasz pakiet będzie obsługiwany (więcej informacji znajduje się w plikach konfiguracyjnych pakietu Webpack )

• devServer

  • contentBase podstawową ścieżkę do obsługi plików statycznych (na przykład index.html )
  • hot ustawia serwer webpack-dev-server na przeładowanie na gorąco, gdy zmiany zostaną wprowadzone w plikach na dysku

Na koniec potrzebujemy prostego index.html do przetestowania naszej aplikacji.

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>

W tej konfiguracji $webpack-dev-server powinien uruchomić lokalny serwer http na porcie 8080 i po połączeniu powinien wyświetlić stronę zawierającą <h1>Hello world!</h1> .