1

我无法使用 webpack 和 babel 进行非常基本的设置。我需要 babel 来编译 JSX，我不使用 ES2015 功能。

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

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

我只将演示我的问题所需的文件提取到这个要点中（我在文件名中使用破折号来指示子文件夹，因为你不能在要点中包含文件夹）。我的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“依赖项”下列出了所有内容，因为我将其托管在不安装 devdependencies 的 heroku 上（至少默认情况下没有）

4

2 回答 2

1

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

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

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

于 2016-02-23T21:38:13.283 回答
1

我也为此撞了很久。原来，include没有找到我的目录。正如上面对标记答案的评论所指出的，最简单的修复方法是使用排除项，例如exclude: /node_modules/，或者您需要排除的任何内容，它将开始工作。

如果你是 webpack 的新手，你会发现你从上述那种神秘的错误中得到的错误（看起来就像你的 js 上的一个解析错误，即使你认为 babel 应该已经改变了 JSX；事实是它没有't）。

于 2017-07-16T15:54:34.680 回答