Question

我的应用程序不支持旧浏览器，我喜欢减少Babel转换集以使代码更容易调试（以便调试器中的代码看起来更像是原始源代码）。

但是，当我迁移到react-hot-loader 3时，这不再起作用。也就是说，我可以让RHL 3使用标准的es2015预设，但不能使用我自定义的变换集。发生的事情是反应组件被渲染但从未安装，并且不会响应任何事件。

我尝试使用的变换集是：

var babel_plugins = [
  'transform-runtime',
  'transform-object-rest-spread',
  // Transforms needed for modern browsers only
  'babel-plugin-check-es2015-constants',
  'babel-plugin-transform-es2015-block-scoping',
  'babel-plugin-transform-es2015-function-name',
  'babel-plugin-transform-es2015-parameters',
  'babel-plugin-transform-es2015-destructuring',
  // No longer needed with Webpack 2
  // 'babel-plugin-transform-es2015-modules-commonjs',
  'react-hot-loader/babel',
];

在回应评论时，这里有更多信息：

以下是我使用AppContainer的方法：

export default (
  <AppContainer>
    <Router history={browserHistory}>
     (My routes here...)
    </Router>
  </AppContainer>
);

这是我的开发服务器设置：

// Adjust the config for hot reloading.
config.entry = {
  main: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://127.0.0.1:8000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './src/main.js', // Your appʼs entry point
  ],
  frame: './src/frame_main.js', // Entry point for popup tab
};
config.plugins.push(new webpack.HotModuleReplacementPlugin());

const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
  contentBase: path.resolve(__dirname, '../builds/'),
  historyApiFallback: true,
  stats: 'errors-only',
  hot: true,
});
server.listen(8000, '127.0.0.1', () => {});

这是我的webpack配置的相关部分：

test: /\.jsx?$/,
include: __dirname + '/src',
exclude: __dirname + '/src/libs',
use: [
  {
    loader: 'babel-loader',
    options: {
      plugins: babel_plugins,
      presets: babel_presets
    },
  },
  {
    loader: 'eslint-loader',
  },
]

使用react-hot-loader和自定义babel预设

0 个答案: