React.js 和 webpack - 为什么它不允许 var、let、const？

Question

我这里有个问题，我无法深入了解。

这是我的 Graph.js 文件中的一个片段：

class Graph extends React.Component {
    @observable newTodoTitle = "";

    s = 40

webpack报错如下：

ERROR in ./src/components/Graph.js
Module build failed: SyntaxError: Unexpected token (13:6)
2018-01-11T14:56:05.221073500Z 
  11 | 
  12 | 
> 13 |   let s = 40
     |       ^

如果我删除 "let"，它可以正常编译！

我希望保留 var、let、const 等，因为我想将大量 JavaScript 复制并粘贴到此文件中而不会出现这些错误。

这是我的 .babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

这是我的 webpack.config.js:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      use: ['babel-loader'],
      include: path.join(__dirname, 'src')
    }]
  }
};

有什么想法吗？

Answer 1

您正在尝试使用 class-fields proposal (stage 3 currently) which you will need the Class properties transform plugin of babel 来支持它。

正如您在文档中看到的那样，您的语法不正确。
class 个字段不需要任何变量声明关键字。

示例来自 docs：

class Counter extends HTMLElement {
  x = 0;

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}

React.js 和 webpack - 为什么它不允许 var、let、const？

React.js and webpack - why won't it allow var, let, const?

javascript

ecmascript-6

reactjs

webpack

ecmascript-2017