Babel + Webpack 不会转译 ES6 [重复]

Question

我刚刚使用 react 为 webapp 设置了环境。

setInitialStates = () => {
    this.state = {showAuthorModal: false};
};

注意：这是正确的语法！

当我尝试运行 webpack --config webpack.config.js 时会发生这种情况

这是我的 webpack.config.js。

const path = require('path');

module.exports = {
    entry: {
        component: [
            './public/javascripts/Rendering.jsx',
            './public/javascripts/CentreQuote.jsx',
            './public/javascripts/AuthorModal.jsx',
            './public/javascripts/LeftNav.jsx'
        ]
    },
    output: {
        path: path.resolve('public/javascripts'),
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
        ]
    }
}

然后我有.babelrc，

{
    "presets":[
        "es2015", "react"
    ],
    "plugins": ["transform-es2015-arrow-functions"]
}

我想我缺少一些将 babelrc 链接到加载器配置的接线步骤？

Answer 1

将 webpack 中的“模块”替换为以下内容：

module: {
  rules: [{
    test: /\.jsx?$/,
    loader: "babel-loader",
    options: {
      cacheDirectory: true, //false for production
      babelrc: false,
      presets: ["es2015", "react"],
      plugins: ["transform-es2015-arrow-functions"]
    }
  }]
}

我做了两件事：

1. 在一个正则表达式测试中统一了 js/jsx 加载器
2. 停止使用 babelrc 来指定 webpack 中的配置。

它应该工作！试试看

您提供的代码的主要问题是您有“加载程序”，但它应该是“规则”