1

我的应用程序不支持旧版浏览器，我喜欢减少 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',
  },
]
4

0 回答 0