Первые шаги
ОБНОВЛЕНИЕ 2018: Вышло второе издание (современный код и версии пакетов, данное издание УСТАРЕЛО)
На канале так же проводятся бесплатные вебинары, публикуются переводы и авторские материалы, присоединяйтесь!
Первые шаги
Для сборки нашего кода будем использовать Webpack.
npm i webpack webpack-dev-middleware webpack-hot-middleware --save-devФлаг --save-dev - добавит пакет webpack (и парочку вспомогательных) в список зависимостей нашего проекта.
Теперь необходимо создать конфигурационный файл
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: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new 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 скрипт собран и вызывает обновления модулей нашего приложения, в остальном cервер всего навсего отдает нам 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Отлично, кое-что уже завелось. Но если сейчас обновить код в файле 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 кода.
Last updated
Was this helpful?