Question

我在使用webpack和babel工作时遇到了一个非常基本的设置。我需要babel来编译JSX，我不使用ES2015功能。

关于这个确切的问题，这里有很多关于SO的问题，但它们似乎都是通过安装babel-preset-react或在webpack.config.js中为babel添加预设选项来解决所有问题已经（我想）。

我确信这是一件我想念的简单事情，但我看不到它。

我只是将演示我的问题所需的文件解压缩到this gist（我在文件名中使用破折号来表示子文件夹，因为你不能在gists中有文件夹）。我的webpack.config.js看起来像这样：

module.exports = {
  entry: [
    './app/js/app.js'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: __dirname + '/app/js/',
        loader: 'babel-loader?presets[]=react',
      }
    ]
  },
  output: {
    filename: "bundle.js",
    path: __dirname + '/public'
  },
};

注意：在package.json中，所有内容都列在“依赖项”下，因为我在heroku上托管这个，而不是安装devdependencies（至少不是默认情况下）

Answer 1

对于它的价值，我目前正在使用带有以下配置行的最新babel的webpack

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

由于您不使用es2015，您应该可以将反应预设保留在列表中。也许babel-loader?presets[]=react没有按照你期望的方式工作。

Answer 2

我也长时间对抗这个问题。原来，include找不到我的目录。正如上面标记答案的评论中所指出的，最简单的修复方法是使用排除，例如： exclude: /node_modules/，或者您需要排除的任何内容，它将开始工作。

如果你是webpack的新手，你会发现你从上面那种神秘的错误中得到的错误（看起来像你的js上的解析错误，即使你认为babel应该改变了JSX;这笔交易是它没有）。

带有babel-loader的Webpack无法识别JSX代码

2 个答案: