好的，经过一番思考，一个好方法看起来是使用sails http 中间件配置的旧customMiddleware 选项，但仅适用于config/env/development.js 中保存的开发环境。
1) 安装 react 和 react-dom（如果你还没有的话）：
$ 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) 安装 react 转换和中间件以进行热模块重载：
$ 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) 配置sails 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) 最后，将http.customMiddleware 配置添加到sails 的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 }
));
},
}
/* ... */
};
假设您在 assets/js/index.jsx（或类似）中有一个 react 应用程序和一个包含您的 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
而且繁荣你应该做生意了！