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链接到loader配置的接线步骤？

Answer 1

更换＆＃34;模块＆＃34;在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中的配置。

它应该工作！试一试

您提供的代码的主要问题是您拥有＆＃34;装载机＆＃34;但它应该是＆＃34;规则＆＃34;