javascript - Babel 预设 2015 和粗箭头函数的问题

Question

这个问题已经有答案了:

How to use arrow functions (public class fields) as class methods? (4 个回答)

已关闭 4 年前。

当我尝试在类组件中使用粗箭头函数时，我收到以下错误...

ERROR in ./src/app/components/Home.js
Module build failed: SyntaxError: C:/myproject/whole/src/app/components/Home.js: Missing class properties transform.

但是，我的 package.json 中有正确的包

对于巴别塔

"babel-cli": "6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-preset-env": "1.6.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-es2017": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.24.1",

对于 Webpack

"webpack": "3.5.6",
"webpack-dev-server": "2.8.2",
"webpack-merge": "4.1.0",
"webpack-node-externals": "1.6.0"

我正在 Webpack 中为 Babel 设置规则

  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [
            'react',
            'stage-0',
            ['env', { targets: { browsers: ['last 2 versions'] } }]
          ]
        }
      }
    ]
  }

注意:我还尝试在“react”之前添加“es2015”。另外，尝试安装 babel-plugin-transform-class-properties，创建 .babelrc conf 文件并在其中添加插件，但没有结果。

这是我的组件:

import React, { Component } from 'react';

class Home extends Component {

  consoleHi = () => {
    console.log('Hi');
  };

  render() {
    return (
      <div>
        Hello
        <div>{this.consoleHi()}</div>
      </div>
    );
  }
}

export default Home;

如果我转译或使用“常规”函数，它就可以工作。

  consoleHi() {
    console.log('Hi');
  }

我缺少什么？谢谢，周末愉快。

记住我正在学习 =)

Answer 1

尝试安装这个插件 babel-plugin-transform-class-properties，然后在你的 babel 配置中，将 transform-class-properties 添加到插件数组中，如下所示:

{
“插件”:[
“变换类属性”
]
}