React
Монтаж

Простая настройка

Настройка папок

В этом примере предполагается, что код находится в src/ и выводится вывод out/ . Таким образом, структура папок должна выглядеть примерно так:

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

Настройка пакетов

Предполагая среду установки npm, мы сначала должны установить babel, чтобы перевести код React в es5-совместимый код.

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

Вышеупомянутая команда будет инструктировать npm для установки основных библиотек бабелей, а также модуля загрузчика для использования с webpack. Мы также устанавливаем es6 и реагируем на предустановки для babel, чтобы понять код модуля JSX и es6. (Более подробную информацию о пресетах можно найти здесь в настройках Babel )

$npm i -D webpack

Эта команда установит webpack как зависимость от разработки. ( i является сокращением для установки и -D сокращением для -save-dev)

Вы также можете установить любые дополнительные пакеты веб-пакетов (например, дополнительные загрузчики или расширение webpack-dev-server)

Наконец, нам понадобится фактический код реакции

$npm i -D react react-dom

Настройка веб-пакета

При настройке зависимостей нам понадобится файл webpack.config.js, чтобы сообщить webpack, что делать

простой 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']
        }
      }
    ]
  }
};

Этот файл сообщает webpack начать с файла index.js (предполагается, что он находится в src /) и преобразовать его в один файл bundle.js в каталог out .

module блокирует webpack для проверки всех файлов, встречающихся с регулярным выражением, и если они совпадают, вызывается указанный загрузчик. ( babel-loader в данном случае) Кроме того, exclude регулярное выражение говорит WebPack игнорировать этот специальный загрузчик для всех модулей в node_modules папке, это помогает ускорить процесс transpilation. Наконец, опция query сообщает webpack, какие параметры передаются в babel, и используется для передачи по предустановленным ранее установкам.

Тестирование настройки

src/index.js файл src/index.js и попробовать упаковать приложение

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

Этот файл обычно выводит простой заголовок <h1>Hello world!</h1> в тег html с идентификатором 'app', но пока этого должно быть достаточно, чтобы перевести код один раз.

$./node_modules/.bin/webpack . Запустит локально установленную версию webpack (используйте $webpack если вы установили webpack глобально с -g)

Это должно создать файл out/bundle.js с преобразованным кодом внутри и завершает пример.

Использование webpack-dev-сервера

Настроить

После настройки простого проекта для использования webpack, babel и реакции на выпуск $npm i -g webpack-dev-server будет устанавливать HTTP-сервер разработки для более быстрой разработки.

Изменение 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
  }
};

Изменения в

• output.publicPath который устанавливает путь для обслуживания нашего пакета (см. файлы конфигурации Webpack для получения дополнительной информации)

• devServer

  • contentBase базовый путь для обслуживания статических файлов (например, index.html )
  • hot устанавливает webpack-dev-сервер для горячей перезагрузки при внесении изменений в файлы на диске

И, наконец, нам просто нужен простой index.html для тестирования нашего приложения.

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>

С этой настройкой, запущенной $webpack-dev-server следует запустить локальный HTTP-сервер на порту 8080, а при подключении должен отобразить страницу, содержащую <h1>Hello world!</h1> .