我正在使用
sails.js和
react开发一个项目.我希望能够使用Webpack的
hot module replacement,这样我就可以编辑我的代码并立即在浏览器上进行更改.但是,我怎么能把它连接起来似乎并不明显.
我希望能够使用$sails lift并让它完全正常工作.
如果这是一个node.js项目,我只需配置webpack以使用react-transform-hmr并从package.json启动webpack-dev-server(例如as described here).但是,这似乎不是一个非常风帆的东西.
我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server的情况下将热重新加载到现有服务器中”.但是,我不确定在Sails> 0.10中添加Express中间件配置的适当位置.
任何人都可以推荐一个好的方法来设置它吗？
解决方法
好吧,经过一些好的方法后,看起来是使用sails的http中间件配置的旧的customMiddleware选项,但仅限于保存在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
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)配置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提升,并在您的浏览器开发控制台上查看以下内容：
|> Now connected to Sails.
\___/ For help,see: http://bit.ly/1DmTvgK
(using browser SDK @v0.11.0)
client.js:51 [HMR] connected
繁荣你应该做生意！
