Использование React Hot Module Reloading с JBOSS (или любым другим Server Software)

Автор оригинала: Zen Savona.

Недавно на работе я разрабатываю приложение JavaScript, которое говорит на API на основе JBOSS (Java). Это приложение развернуто и обслуживается jboss и ранее, как у меня делали развитие, имели WebPack Смотреть скрипт с NPM , а потом rsync Встроенные файлы в каталог сервер Java обслуживает их. Это в основном из-за CORS и JBOSS SSO работает только для определенных доменов (и по расширению, портам).

Недавно я понял, что на самом деле могу значительно улучшить свой рабочий процесс с HMR (Reloading Hot Module) и что он полностью возможно, без использования узла для обслуживания вашего index.html (или что-нибудь).

Хорошо, как мы это делаем?

Первый до тебе понадобится разные index.html Файлы для проведения вашего кода JS для разработки и производства. Это верно для любой установки HMR.

Давайте посмотрим на Соответствующий раздел документов WebPack Отказ

Что это в основном говорит нам, это то, что обычно WebPack-Dev-Server Служит как иноведение index.html Файл со ссылкой на URL-адрес, который обслуживает горячий загруженный код и фактический код, когда мы его меняем. По умолчанию по умолчанию обслуживается на портах 8080 и 9090. Что мы хотим сделать, это половина этого. Мы все еще хотим служить горячим загруженным коде, но не index.html Как мы будем обслуживать себя с нашим собственным веб-сервером (в моем случае jboss).

Это руководство предполагает, что у вас есть базовый WebPack 1.x Настройка уже идет. Если вы этого не сделаете, вы можете обратиться к Это руководство Отказ

Установка зависимостей

Нам нужно установить (если у вас их еще нет) html-webpack-plugin , WebPack-Dev-Mardware , WebPack-Dev-Server и WebPack-Hot-Mardware , URL-погрузчик , Стиль-погрузчик , файловой погрузчик Отказ

Вы можете просто запустить NPM Установка --save-dev Webpack-Hot-Mardware Webpack-Dev-Server WebPack-Dev-Mardware HTML-Webpack-Plugin-Look-Loader File-Loader URL-погрузчик

WebPack Config.

Далее мы обновим наше webpack.conf.js Чтобы запустить DEV Server и сделать HMR!

Ниже приведен простой пример webpack.conf.js , вы можете скопировать и вставлять биты, которые выглядят отличаться в вашем собственном.

Эта конфигурация делает несколько предположений:

• Ваши встроенные файлы будут выводиться в распад/
• Ваши исходные файлы живут в SRC/
• Ваше приложение EntryPoint – SRC/Main. {JS, JSX} (может иметь либо расширение JS или JSX)
• Существует файл в той же папке, что и этот файл конфигурации под названием index.ejs (Мы доберемся до этого всего за секунду)

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'dist');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  devtool: 'eval',
  entry: [
    "webpack-dev-server/client?http://localhost:9090",
    "webpack/hot/only-dev-server",
    'babel-polyfill',
    APP_DIR + '/main'
  ],
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: "http://localhost:9090/"
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.ejs'
    })
  ],
  devServer: { inline: true },
  module : {
    loaders : [
      {
        test : /\.jsx?$/,
        include : APP_DIR,
        loaders : ['react-hot', 'babel']
      },
      {
        test: /\.css$/,
        loader: 'style!css?sourceMap'
      }, {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&mimetype=image/svg+xml"
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.css']
  }
};

module.exports = config;

index.ejs.

Это в основном шаблон WebPack использует для введения разметки, необходимой для горячей нагрузки. Он в основном просто HTML-файл (он может выводить некоторые переменные ), которые служат ваш пакет.

Сервер HMR

Далее нам нужно установить Express ( NPM Установить --save-dev Express ) и создать файл под названием server.js.

Что это на самом деле служит подключенным файлом для WebPack-Dev-Server Чтобы отправить на страницу каждый раз, когда мы делаем изменение. У меня также есть мой служить still.css файл.

var express = require('express');
var app = express();

// Serve application file
app.get('/bundle.js', function(req, res) {
  res.sendFile(__dirname + '/dist/bundle.js');
});

// Serve aggregate stylesheet
app.get('/style.css', function(req, res) {
  res.sendFile(__dirname + '/build/style.css');
});

app.use(express.static('dev-public'));


// Serve index page
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html');
});

if (!process.env.PRODUCTION) {
  var webpack = require('webpack');
  var WebpackDevServer = require('webpack-dev-server');
  var config = require('./webpack.config');

  new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    noInfo: true,
    historyApiFallback: true
  }).listen(9090, 'localhost', function (err, result) {
    if (err) {
      console.log(err);
    }
  });
}

Сценарий NPM и начинающий вещи

Давайте сделаем новую запись в Сценарии Раздел нашего Package.json Это выглядит так:

"server": "webpack --progress -p && node server.js"

Затем запустите NPM запустить сервер Отказ

Наконец, нам нужно скопировать index.html Файл из нашего Dist/ каталог туда везде, где веб-сервер (в моем случае jboss) ищет его. Это может быть в .war/ Папка/файл где-то на вашей файловой системе. Этот метод работает в значительной степени любого вида веб-сервера!