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
     |       ^

如果我删除＆＃34;让＆＃34;，它编译得很好！

我更喜欢保留var，let，consts等，因为我想将大量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提案（当前第3阶段），您需要Class properties transform plugin of babel来支持此提案。

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

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？

1 个答案: