Первые шаги

Для сборки нашего кода будем использовать Webpack.

npm i webpack webpack-dev-middleware webpack-hot-middleware --save-dev

Флаг --save-dev — добавит пакет webpack (и парочку вспомогательных) в список зависимостей нашего проекта.

На данный момент самым свежим является Webpack 4 (версия 4.5.0). Но в данном курсе используется стабильный Webpack 3. Для его установки подправим командную строку:

npm i webpack@^3.0.0 webpack-dev-middleware@^2.0.0 webpack-hot-middleware --save-dev

Установятся следующие пакеты: webpack 3.11.0, webpack-dev-middleware 2.0.6 и webpack-hot-middleware 2.22.1.

Теперь необходимо создать конфигурационный файл

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [ // webpack.optimize.OccurenceOrderPlugin() больше не поддерживается
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin() // введен взамен webpack.NoErrorsPlugin()
  ]
}

Даже для тех, кто не знаком с webpack'ом, этот конфиг покажется вполне понятным. В entry — указывается откуда webpack'у начинать сборку, а в output — куда сгенерировать. В devtool указываем, что нам нужен source-map для отладки кода с парой настроек (cheap, module, eval).

Интерес пытливого читателя может вызвать строка 'webpack-hot-middleware/client' (NPM), которая нужна нам для поддержки hot-reload, вместе с одним из плагинов — webpack.HotModuleReplacementPlugin

Server

Нам понадобится сервер для разработки, для этого мы можем использовать webpack-dev-server, либо быстро развернем свой. В данном руководстве рассматривается второй вариант.

Для начала установим express

npm i express --save-dev

и создадим наш web-сервер на его основе.

server.js

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')

var app = new (require('express'))()
var port = 3000

var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))

app.get("/", function(req, res) {
  res.sendFile(__dirname + '/index.html')
})

app.listen(port, function(error) {
  if (error) {
    console.error(error)
  } else {
    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
  }
})

Обратите внимание на строку

app.use(webpackHotMiddleware(compiler))

На этом шаге добавляется немного магии к нашему серверу, а именно: сервер теперь принимает уведомления, когда главный js скрипт собран и вызывает обновления модулей нашего приложения, в остальном сервер всего-навсего отдает нам index.html, в котором мы подключаем файл, сгенерированный webpack'ом.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Redux [RU] Tutorial</title>
  </head>
  <body>
    <div id="root">
    </div>
    <script src="/static/bundle.js"></script>
  </body>
</html>

Добавим точку входа для webpack'а. Мы указали ее в нашем webpack.config.js в настройке entry — index.js

src/index.js

document.getElementById('root').innerHTML = 'Привет, я готов.'

Проверим?

npm start

http://localhost:3000/

Отлично, кое-что уже завелось. Но, если сейчас обновить код в файле index.js, страница в браузере останется прежней. Хотя при этом в консоли мы увидим, что webpack что-то пересобрал.

Hot Reload

Дело в том, что «модуль» index.js не умеет сообщать webpack'у каким образом он хотел бы обновиться. Сейчас, для простоты примера, достаточно добавить строку module.hot.accept(), которая сообщает webpack'у следующую информацию: «Я (index.js) умею hot-reload сам, для этого просто возьми и обнови меня в сгенерированном файле (/static/bundle.js).»

src/index.js

document.getElementById('root').innerHTML = 'Привет, я готов!'
module.hot.accept()

Перезапустите сервер, обновите страницу браузера.

А теперь поменяйте текст в index.js — он так же обновится на экране. Браузер не перезагрузит страницу, как в случае с live-reload, а сразу заменит только нужный кусочек. Это гораздо удобнее!

Конечно, постоянно указывать module.hot.accept() не удобно, и не разумно. Следующий шаг поможет нам избавиться от «ручной» настройки hot-reload для react.js кода.

results matching ""

    No results matching ""