react-hot已死! 使用react-transform

Posted by yuk on 2016-04-12

在使用antd+koa做项目的时候,发现react-hot-loader不管用了。不会自动刷新而且会报错。

1
Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

结果在github上的大神说这个项目已经停了，推荐使用react-transform-boilerplate

然而搞了半天并不懂react-transform是什么东西，于是：
按照文档安装了一个demo

1
2
3
4
5
git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000

然而发现这个是用express中间件实现的.脑子里不断想怎么转成koa支持的中间件。
devServer.js核心的两行代码是这样:

1
2
3
4
5
6
var compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));

一开始以为是可以另外开一个服务器,基于express。尝试了一下，这个webpack-dev端口8080，项目端口设置3000.但是发现项目启动会不断向项目端口发送 localhost:3000/webpack_hmr 然而我期望的是localhost:3004/webpack_hmr 。发现直接改代码也不方便…..暂时放弃.
然后开始研究一下koa中间件。 webpack-hot-middleware有提供 koa中间件的方式。但是webpack-dev-middleware好像暂时还没有提供。于是乎不出所料的会出现问题。

解决办法:

这个时候,脑子乱了,想撤回刚刚所有的更改重来.结果就可以了….本着好奇心.猜测可能是在这过程中改了什么,让原来的方法生效.查找了一下发现可能是:

  1. 更新了webpack-dev-server版本到1.6.0.
  2. React Transform正确的使用方法
1
2
3
4
5
6
#这是基本框架
npm install --save-dev babel-plugin-react-transform
#实现hmr
npm install --save-dev react-transform-hmr
#捕捉到错误给你大大的红色
npm install --save-dev react-transform-catch-errors redbox-react
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#webpack.config.js做了如下修改
#原来
 {
 test : /.(js|jsx)$/,
 exclude: /node_modules/,
 loaders: ['babel'],
 include: path.join(__dirname, 'src')
 loaders: ['react-hot','babel?presets[]=es2015&presets[]=react&presets[]=stage-0&plugins[]=transform-decorators-legacy']
}

#删除react-hot部分
{
test : /.(js|jsx)$/,
exclude: /node_modules/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}

使用.babelrc配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#.babelrc
{
   "presets": ["es2015", "react", "stage-0"],
  "plugins":["transform-decorators-legacy"],
  "env": {
    "development": {
        "presets": ["react-hmre"],
        "plugins": [
               ["react-transform", {

                 "transforms": [{

                   "transform": "react-transform-hmr",
                   "imports": ["react"],
                   "locals": ["module"]
                 }, {
                   "transform": "react-transform-catch-errors",
                   "imports": ["react", "redbox-react"]
                 }]
               }]
             ]
    }
  }
}

至于启动server的配置还是和官网一样。

1
node webpack.server.js
FEATURED TAGS
FRIENDS