Javascript 为什么可以'；是否使用ES6从代码笔运行程序？

我在CodePen上发现了一个React项目，它是一个。出现以下语法错误：

ERROR in ./app/index.jsx
Module build failed: SyntaxError: Unexpected token (45:19)

  43 | class CalculatorDisplay extends React.Component {
  44 |   render() {
> 45 |     const { value, ...props } = this.props

这是：

ERROR in ./app/index.jsx
Module build failed: SyntaxError: Unexpected token (4:8)

  2 |
  3 | class AutoScalingText extends React.Component {
> 4 |   state = {
    |         ^
  5 |     scale: 1
  6 |   };

我的

webpack.config.js

中的加载程序配置为：

  module: {
    loaders: [
      {
        test: /\.(jsx|js)?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader?limit=8192"
      }
    ]
  },

---

我知道ES2015中使用了一些不受支持的语法，但它如何在CodePen中运行，是否有更新的ES版本支持这些语法？

使用babel时，请确保节点模块中包含以下软件包。如果没有，您可以像这样安装它们

npm i babel-loader babel-preset-es2015 babel-preset-react -S

您的网页包加载程序似乎已正确配置。必须在构造函数中指定初始状态，如

class AutoScalingText extends React.Component {
constructor(){
     this.state = {  
           scale: 1
      };
}

如果您使用npm包babel-preset-state-0，那么您使用的语法是有效的。你需要像这样安装它

npm install -S babel-preset-stage-0

在你的网页中，像这样使用它

 {
    test: /\.(jsx|js)?$/,
    loader: 'babel',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react', 'stage-0']
    }
  }

---

单击JS窗格旁边的设置图标，选择

Babel

。还有一个问题是CodePen是OK的，我的意思是我不能在我自己的项目中使用webpack运行它。@Tushar您需要配置Babel，以便为您正在使用的功能使用插件。“它是如何在CodePen中运行的”也许他们默认启用了所有实验功能。但是为什么不能在类级别声明类属性，而不是像CodePen中的代码那样在构造函数中声明类属性呢？我知道这在ECMA2015中是非法的，但是哪个版本支持这些语法呢？编辑了答案我试着安装了

类属性

和

对象rest spread

，然后成功了。但是你的解决方案非常有用。非常感谢！你能接受这个答案吗？如果你尝试这个而不是你的评论，它对你有用吗