क्या मैं वेबपैक के हॉट मॉड्यूल का उपयोग sailsjs के साथ पुनः लोड कर सकता हूं?

Question

मैं sails.js और react का उपयोग कर एक प्रोजेक्ट पर काम कर रहा हूं। मैं वेबपैक के hot module replacement का उपयोग करने में सक्षम होना चाहता हूं, इसलिए मैं अपना कोड संपादित कर सकता हूं और इसे तुरंत ब्राउज़र पर बदल सकता हूं। हालांकि, यह स्पष्ट नहीं लगता है कि मैं इसे कैसे तार कर सकता हूं।

मैं $ sails lift का उपयोग करने में सक्षम होना चाहता हूं और यह सब बस काम कर रहा हूं।

यदि यह एक Node.js परियोजना थे, मैं बस webpack react-transform-hmr का उपयोग करें और package.json से webpack-dev-server (जैसे as described here) शुरू करने के लिए कॉन्फ़िगर चाहते हैं। लेकिन, यह बहुत sails-y चीज़ नहीं लगता है।

मुझे मॉड्यूल webpack-hot-middleware purports देखने में सक्षम होने के लिए सक्षम है, "मौजूदा सर्वर में webpack-dev-server के बिना हॉट रीलोडिंग जोड़ें।" हालांकि, मुझे यकीन नहीं है कि सेल> एक्सप्रेस में एक्सप्रेस मिडलवेयर कॉन्फ़िगरेशन जोड़ने के लिए उचित स्थान कहां है।

क्या कोई इसे स्थापित करने के लिए एक अच्छा तरीका सुझा सकता है?

Answer 1

ठीक है, कुछ अच्छे दृष्टिकोण के आसपास कुछ नूडलिंग के बाद पुराने customMiddleware सैल के http मिडलवेयर कॉन्फ़िगरेशन के विकल्प का उपयोग करना प्रतीत होता है, लेकिन केवल config/env/development.js में बनाए गए विकास पर्यावरण के लिए।

1) स्थापित करें प्रतिक्रिया और प्रतिक्रिया-डोम (यदि आप पहले नहीं किया है):

$ npm install react react-dom --save 

2) webpack स्थापित करें, गर्म मॉड्यूल पुन: लोड (& ES6) पाल के लिए समर्थन:

$ 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 

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

4) डि:

3) स्थापित करें पुन: लोड गर्म मॉड्यूल के लिए रूपांतरण और मिडलवेयर प्रतिक्रिया सेबल में निर्मित घुरघुराना हुक कि सामान्य रूप से अपने आवेदन लिंक होगा:

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

5) पाल कॉन्फ़िगर 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) कॉन्फ़िगर परियोजना चौड़ा .babelrc :

+०१२३५१६४१०६:

{ 
    "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) अंत में, पाल के config/env/development.js करने के लिए http.customMiddleware विन्यास जोड़ने

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 } 
    )); 
    }, 
    } 

    /* ... */ 
}; 

यह मानकर आप assets/js/index.jsx (या समान) में एक प्रतिक्रिया आवेदन मिल गया है और एक दृश्य जो अपने bundle.js फ़ाइल शामिल आपको अपने ब्राउज़र का विकास कंसोल पर निम्न देखें में सक्षम करने के लिए बस $ sails lift होना चाहिए:

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



client.js:51 [HMR] connected 

और बूम आपको व्यवसाय में होना चाहिए!

Answer 2

आपका समाधान महान काम करना चाहिए, लेकिन मैं यह पढ़ दूसरों के लिए एक और त्वरित समाधान में ड्रॉप करना चाहता था:

आप पूरी तरह Sails.js पाइपलाइन का निर्माण और webpack अलग से चलाने निकाल सकते हैं। एक सबहेल में एक साथ दोनों आदेशों को चलाना चाल करना चाहिए।

(webpack & sails lift ;)

दोनों आदेशों को चलाने जाएगा और आप दोनों के उत्पादन में टर्मिनल में विलय कर दिया देखेंगे। Ctrl + C दोनों को सही ढंग से मार देगा क्योंकि यह सबहेल में चल रहा है।

आप प्रत्येक बार दो आदेशों को लिखने से बचाने के लिए एक एनपीएम स्क्रिप्ट बना सकते हैं।

Answer 3

हमने वेबपैक को आंतरिक रूप से संभालने के लिए अपना खुद का सेल हुक बनाया, इस समय महान काम करता है। कॉन्फ़िगरेशन को कुछ सफाई की आवश्यकता है हालांकि: https://github.com/teamfa/sails-hook-webpack