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

Posted 2023-03-07

【中文标题】React.js 和 webpack - 为啥它不允许 var、let、const？

【英文标题】：React.js and webpack - why won't it allow var, let, const?React.js 和 webpack - 为什么它不允许 var、let、const？

【发布时间】：2018-06-20 23:01:54

【问题描述】：

我在这里遇到了一个我无法深入了解的问题。

这是我的 Graph.js 文件中的一个 sn-p：

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、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')
    ]
  
;

有什么想法吗？

【问题讨论】：

您确定正确支持@observable 吗？

@Anselm 非常感谢。是的，当我删除 let s = 40 行时，一切编译正常

我可能已经找到答案了...***.com/a/37840719/395974

预设顺序错误，将es2015排在首位-不反应。它需要从右到左编译。此外，缺少类属性转换插件，尽管它可能被 stage-1 覆盖，因为它现在是 stage-3

你也可以看看***.com/questions/22156326/…

【参考方案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();