Czy mogę ponownie załadować moduł hot plugów webpack za pomocą programu sailsjs?

Question

Pracuję nad projektem przy użyciu sails.js i react. Chciałbym móc korzystać z pakietu Webpack hot module replacement, więc mogę edytować kod i natychmiast go zmienić w przeglądarce. Jednak nie wydaje się oczywiste, jak mogę to wszystko połączyć.

Chciałbym móc korzystać $ sails lift i to wszystko po prostu działa.

Gdyby to był node.js projekt, to bym po prostu skonfigurować WebPack używać react-transform-hmr i rozpocząć webpack-dev-server z package.json (np as described here). Ale to nie wydaje się być bardzo trudne.

Widzę moduł webpack-hot-middleware rzekomych, aby móc "dodać gorący reloading do istniejącego serwera bez webpack-dev-server." Jednak nie jestem pewien, gdzie jest odpowiednie miejsce do dodania konfiguracji Expressware middleware w Sails> 0.10.

Czy ktoś może polecić dobry sposób to skonfigurować?

Answer 1

Ok, po jakimś noodling wokół dobrym podejściem wydaje się być używać starego customMiddleware opcję http konfiguracji middleware żagle, ale tylko dla środowiska rozwój przechowywane w config/env/development.js.

1) Instalacja reagować i reagować-DOM (jeśli jeszcze go nie masz):

$ npm install react react-dom --save 

2) Instalowanie WebPACK, gorący moduł przeładunkowych (& ES6) wsparcie dla żagli:

$ npm install sails-webpack babel-core babel-loader \ 
    babel-plugin-syntax-class-properties babel-plugin-syntax-decorators \ 
    babel-plugin-syntax-object-rest-spread \ 
    babel-plugin-transform-class-properties \ 
    babel-plugin-transform-decorators-legacy \ 
    babel-plugin-transform-object-rest-spread \ 
    babel-preset-es2015 babel-preset-react \ 
    copy-webpack-plugin file-loader --save 

3) zainstalować reakcji przekształca i pośredniczące w gorącym modułu przeładunku:

$ npm install babel-plugin-react-transform 
    react-transform-catch-errors react-transform-hmr \ 
    webpack-dev-middleware webpack-hot-middleware --save-dev 

4) Di sable wbudowany hak grunt które normalnie połączyć swoją aplikację:

// .sailsrc 
{ 
    "hooks": { 
    "grunt": false 
    } 
} 

5) Konfiguracja żagle konfigurację WebPACK:

// config/webpack.js 

var webpack = require('webpack'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var path = require('path'); 

// compile js assets into a single bundle file 
module.exports.webpack = { 
    options: { 
    context: path.join(__dirname, '..'), 

    devtool: 'eval', 

    entry: [ 
     './assets/js', 
     'webpack-hot-middleware/client' 
    ], 

    output: { 
     path: path.resolve(__dirname, '../.tmp/public'), 
     publicPath: "/", 
     filename: 'bundle.js' 
    }, 

    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 

     /* Copy sails.io.js unmolested: */ 
     new CopyWebpackPlugin([ 
     { 
      from: 'assets/js/dependencies', 
      to: 'dependencies', 
      force: true 
     } 
     ]), 
    ], 

    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /(bower_components|node_modules)/, 
      loader: 'babel', 
     }, 
     { test: /\.css$/, loader: 'style!css' }, 
     { 
      test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, 
      loader: "file" } 
     ] 
    } 
    }, 

    // docs: https://webpack.github.io/docs/node.js-api.html#compiler 
    watchOptions: { 
    aggregateTimeout: 300 
    } 
}; 

6) Konfiguracja całego projektu .babelrc użyć modułu ciepłej reload w trybie rozwoju :

{ 
    "presets": [ 
    "es2015", 
    "react", 
    ], 
    "plugins": [ 
    "syntax-class-properties", 
    "syntax-decorators", 
    "syntax-object-rest-spread", 
    "transform-class-properties", 
    "transform-decorators-legacy", 
    "transform-object-rest-spread" 
    ], 
    "env": { 
    "development": { 
     "plugins": [["react-transform", { 
     "transforms": [{ 
      "transform": "react-transform-hmr", 
      "imports": ["react"], 
      "locals": ["module"] 
     }] 
     }]] 
    } 
    } 
} 

7) na koniec dodać http.customMiddleware konfigurację żagle na config/env/development.js:

module.exports = { 

    /* ... */ 

    /* 
    * Enable webpack hotloading while in development mode: 
    */ 

    http: { 
    customMiddleware: function (app) { 
     var webpack = require('webpack'); 
     var webpackConfig = require('../webpack').webpack.options; 
     var compiler = webpack(webpackConfig); 

     app.use(require("webpack-dev-middleware")(compiler, 
     { 
      noInfo: true, 
      publicPath: webpackConfig.output.publicPath 
     } 
    )); 
     app.use(require("webpack-hot-middleware")(compiler, 
     { reload: true } 
    )); 
    }, 
    } 

    /* ... */ 
}; 

Zakładając masz aplikację reagowania w assets/js/index.jsx (lub podobny) i widok, który zawiera plik bundle.js powinieneś być w stanie po prostu $ sails lift i zobacz, co następuje na konsoli rozwój Twojego Brower za:

|> Now connected to Sails. 
\___/ For help, see: http://bit.ly/1DmTvgK 
     (using browser SDK @v0.11.0) 



client.js:51 [HMR] connected 

I wysięgnik powinieneś być w biznesie!

Answer 2

Twoje rozwiązanie powinno działać świetnie, ale chciałem spaść w innym szybkie rozwiązanie dla innych czytających to:

można całkowicie usunąć Sails.js zbudować rurociąg i uruchomić WebPack oddzielnie. Uruchomienie obu poleceń jednocześnie w podpowłoce powinno załatwić sprawę.

(webpack & sails lift ;)

Oba polecenia zostanie uruchomiony i pojawi się wyjście zarówno połączone w terminalu. Ctrl + C zabije oba poprawnie, ponieważ działa w podpowłoce.

Można utworzyć skrypt npm, aby zapisać się od wypisywania dwóch poleceń za każdym razem.

Answer 3

Stworzyliśmy własny haczyk Sails do obsługi Webpacka wewnętrznie, działa świetnie w tej chwili. Konfiguracja wymaga jednak trochę czyszczenia: https://github.com/teamfa/sails-hook-webpack