Babel/webpack 不读取 jsx答案

【问题标题】：Babel/webpack not reading jsxBabel/webpack 不读取 jsx
【发布时间】：2015-11-11 18:24:19
【问题描述】：

我的 react/webpack 设置有点麻烦，它命中的第一个 JSX 位，我“意外的令牌” - 就像 JSX 中的第一个

 const path = require('path');

 const webpack = require('webpack');

module.exports = {
entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/index.jsx'
],
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
},
resolve: {
    extensions: ['', '.js', '.jsx']
},
output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: './dist',
    hot: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

};

我注意到如果我将加载器交换为使用 react-hot，它不再知道如何读取 es6 导入：

  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
    }]
},

（给出错误 - 意外的令牌您可能需要适当的加载程序来处理此文件类型。引用导入行）

不确定我在这里缺少什么，可以使用一些帮助。谢谢！

【问题讨论】：

标签： javascript webpack babeljs

【解决方案1】：

如果您使用的是 Babel 6.0，默认情况下它不会再转译您的代码。 (https://babeljs.io/blog/2015/10/29/6.0.0/)，上面写着：

由于 Babel 专注于成为 JavaScript 工具的平台，并且不是 ES2015 转译器，我们决定制作所有插件选择参加。这意味着当你安装 Babel 时，它将不再编译默认你的 ES2015 代码。

如果你想转译你的代码，你需要安装两个预设：

npm install --save-dev babel-preset-es2015 babel-preset-react

在您的 webpack.config.js 中，您可以指定使用如下预设：

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },

【讨论】：

【解决方案2】：

你应该添加 .babelrc 配置文件。

{
  "presets": ["env", "react"]
}

【讨论】：