缺少类属性转换反应

Question

我知道这里有很多问题/答案，但是似乎没有一个问题可以帮助我解决问题。 我不明白我的设置有什么问题：

这是我的webpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ftux-components.js',
    library: "shared-components",
    libraryTarget: "umd"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },
      {
        test: /\.s?css$/,
        loaders: ['style', 'css', 'sass', 'postcss-loader']
      },
      {
        test: /\.(ttf|eot|svg|jpg|png|woff)$/,
        loader: 'url-loader'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  },
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    },
    'styled-components': {
      commonjs: 'styled-components',
      commonjs2: 'styled-components',
      amd: 'styled-components'
    }
  }
};

这是我的babelrc：

{
    "presets": ["env", "react", "es2015", "stage-0"],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
        "transform-react-jsx"
    ]
}

我尝试重新排序预设，添加适当的插件（transform-class-properties），删除重新安装的node_modules，但似乎无济于事。 我的npm和node是最新的，还尝试使用它来确保我包括了babel所需的一切。 有什么建议么？

Answer 1

在babel loader中，即使您已经安装了类属性插件，也没有包含它。 尝试使您的装载机看起来像这样：

     {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['env', 'react', 'es2015', 'stage-0'],
          plugins: ["transform-class-properties"]
        }
      },

Answer 2

好吧，我知道了。 我需要在webpack.config.js的模块对象的rules数组中包括预设和插件：

rules: [
    {
    test: /\.js$/,
    include: path.resolve(__dirname, 'src'),
    exclude: /(node_modules|bower_components|build)/,
    loader: 'babel-loader',
    query: {
        presets: ['env', 'react', 'es2015', 'stage-0'],
        plugins: ["transform-class-properties"]
    }
    }
]

在这里找到答案。