好久没更博,好久没更博,好久没更博,好久...
玩react
,一般人都会选择webpack
搭配使用,再用上react-hot-loader
热替换。不过现在react-hot-loader
已经更新到
3.0版本,而其Get Started还是1.3版本的语法。这里简单对比下3.0语法。
webpack.dev.config.js
// v1.3
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'jsx?harmony'],
include: path.join(__dirname, 'src')
}
]
// v3.0
loaders: [
{
test: /\.jsx?$/,
loaders: ['babel'],
include: path.join(__dirname, 'src')
}
]
.babelrc
// v1.3
{
"presets": ["es2015", "stage-0", "react"]
}
//v3.0
{
"presets": [ "es2015", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
}
entry file
// v3.0
import 'react-hot-loader/patch';
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import RootContainer from './containers/rootContainer.js';
render((
<AppContainer>
<RootContainer />
</AppContainer>
), document.getElementById('react-root'));
if (module.hot) {
module.hot.accept('./containers/rootContainer.js', () => {
const NextRootContainer = require('./containers/rootContainer.js').default;
render((
<AppContainer>
<NextRootContainer />
</AppContainer>
), document.getElementById('react-root'));
})
}
恩,完了。
如果有疑问,可以查看这个例子。