6

我正在使用sails.js和react开发一个项目。我希望能够使用 Webpack 的热模块替换，这样我就可以编辑我的代码并立即在浏览器上进行更改。但是，我如何将它们全部连接起来似乎并不明显。

我希望能够使用$ sails lift并让它正常工作。

如果这是一个 node.js 项目，我只需将 webpack 配置为使用react-transform-hmr并webpack-dev-server从 package.json 开始（例如，如此处所述）。但是，这似乎不是一件很顺利的事情。

我看到模块webpack-hot-middleware声称能够“在没有webpack-dev-server. 但是，我不确定在 Sails > 0.10 中添加 Express 中间件配置的合适位置在哪里。

任何人都可以推荐一个设置它的好方法吗？

4

3 回答 3

8

好的，经过一番思考，一个好方法看起来是使用sails中间件配置的旧customMiddleware选项http，但仅适用于保留在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) 安装用于热模块重载的反应转换和中间件：

$ 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（或类似的）反应应用程序和一个包含您的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

繁荣你应该做生意！

于 2016-01-04T04:38:33.807 回答
2

您的解决方案应该很好用，但我想为其他阅读本文的人提供另一个快速解决方案：

您可以完全删除 Sails.js 构建管道并单独运行 webpack。在子外壳中同时运行这两个命令应该可以解决问题。

( webpack & sails lift ; )

两个命令都将运行，您将在终端中看到两个合并的输出。Ctrl+C 也将正确杀死两者，因为它在子shell 中运行。

您可以创建一个 npm 脚本来避免每次都写出这两个命令。

于 2016-04-13T17:25:47.790 回答
1

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

于 2016-04-19T15:01:23.767 回答