我可以使用sailsjs重新加载webpack的热模块吗?

我正在使用sails.js进行一个项目并作出反应 。 我希望能够使用Webpack的热模块更换,所以我可以编辑我的代码,并立即在浏览器上更改。 不过,我怎样才能把这一切联系起来似乎并不明显。

我希望能够使用$ sails lift并只是工作。

如果这是一个node.js项目,我简单地configurationwebpack使用react-transform-hmr并从package.json启动webpack-dev-server (例如这里所描述的 )。 但是,这似乎并不是一件非常有趣的事情。

我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server情况下将热重新加载到现有服务器”。 但是,我不确定在Sails> 0.10中添加Express中间件configuration的适当位置在哪里。

任何人都可以推荐一个好的方法来设置这个?

       

网上收集的解决方案 "我可以使用sailsjs重新加载webpack的热模块吗?"

好了,在一些好的方法之后,好的方法是使用customMiddlewarehttp中间件configuration的旧customMiddleware选项,但只能用于保存在config/env/development.js的开发环境。

1)安装反应和反应(如果你还没有):

 $ npm install react react-dom --save 

2)安装webpack,重新加载模块(&ES6),支持sails:

 $ 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)安装反应转换和中间件以进行热模块重新加载:

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

4)禁用通常会链接您的应用程序的内置grunt挂钩:

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

5)configurationsails webpackconfiguration:

 // 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)在开发模式下configuration项目范围的.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)最后,将http.customMiddlewareconfiguration添加到http.customMiddlewareconfig/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 } )); }, } /* ... */ }; 

假设你已经在assets/js/index.jsx (或类似的)和一个包含你的bundle.js文件的视图中获得了一个反应应用程序,你应该能够简单地$ sails lift sails $ sails lift并在你的浏览器的开发控制台上看到以下内容:

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

繁荣,你应该在业务!

您的解决scheme应该很好,但是我想为其他读者提供一个快速解决scheme:

您可以完全删除Sails.js构buildpipe道并分别运行webpack。 在一个子shell中同时运行这两个命令应该可以做到。

( webpack & sails lift ; )

这两个命令都会运行,您将在terminal中看到合并的输出。 由于它在子shell中运行,所以Ctrl + C也会同时杀死它们。

你可以创build一个npm脚本来保存每一次写出这两个命令。

我们创build了自己的Sails钩子来内部处理Webpack,目前效果很好。 但是configuration需要一些清理: https : //github.com/teamfa/sails-hook-webpack