Javascript Webpack在JS文件中抛出了一个奇怪的语法错误

我的JS文件有一个简单的文件结构：

bundle.js
src
 |
 -- main.js
 -- forms
       |
       -- forms.js

我的main.js文件如下所示：

let forms = require('./forms/forms');

export default class Forms {
    test = () => {
        alert('Forms.test() executed!');
    }
}

var forms = new Forms();
forms.test();

module.exports = {
  entry: './static/js/src/main.js',
  output: {
    filename: './static/js/bundle.js'
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ],
  }
};

forms.js文件如下所示：

let forms = require('./forms/forms');

export default class Forms {
    test = () => {
        alert('Forms.test() executed!');
    }
}

var forms = new Forms();
forms.test();

module.exports = {
  entry: './static/js/src/main.js',
  output: {
    filename: './static/js/bundle.js'
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ],
  }
};

这会引发以下错误：

Hash: a1ed74e596de181cec27
Version: webpack 1.14.0
Time: 21592ms
                Asset    Size  Chunks             Chunk Names
./static/js/bundle.js  277 kB       0  [emitted]  main
+ 3 hidden modules

ERROR in ./static/js/src/forms/forms.js
Module build failed: SyntaxError: Unexpected token (4:6)

  2 | 
  3 | export default class Forms {
> 4 |   test = () => {
    |        ^
  5 |       alert('Forms.test() executed!');
  6 |   }
  7 | }

 @ ./static/js/src/main.js 4:12-36

它给出了一个关于定义测试方法的行的语法错误。我添加了babel加载程序，在main.js文件中，ES6代码被正确传输和执行

我的webpack.config.js文件如下所示：

let forms = require('./forms/forms');

export default class Forms {
    test = () => {
        alert('Forms.test() executed!');
    }
}

var forms = new Forms();
forms.test();

module.exports = {
  entry: './static/js/src/main.js',
  output: {
    filename: './static/js/bundle.js'
  },
  watch: true,
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      }
    ],
  }
};

babel加载程序是否不能正确处理forms.js文件或其他文件？我没有在配置文件中排除该文件或其文件夹或任何东西，那么为什么会出现语法错误呢？我知道这是一个有效的JS，因为我在另一个项目中编写了它，它工作得很好

顺便说一句，main.js文件中的导入也不起作用，而其他ES6功能也起作用？这与此有关吗？

不是ECMASCRECMAScript 2015/2016的一部分，而是第二阶段的建议

要使用它，您需要将babel配置为包含

您可以在babel loader查询中仅安装该插件：

或npm安装并将其作为预设包含在babel loader查询中：

不是ECMASCRECMAScript 2015/2016的一部分，而是第二阶段提案

要使用它，您需要将babel配置为包含

您可以在babel loader查询中仅安装该插件：

或npm安装并将其作为预设包含在babel loader查询中：

---

您可以将其定义为常规方法：

export default class Forms {
    test() {
        alert('Forms.test() executed!');
    }
}

---

您可以将其定义为常规方法：

export default class Forms {
    test() {
        alert('Forms.test() executed!');
    }
}

---

但是如果我想使用箭头函数呢？我的意思是，在以前的一个项目中，我可以按照我想要的方式定义方法，但是这次它给了我一个语法错误？我如何才能做到这一点？如果用传统方法语法定义不令人满意，请检查Ori的答案。@erol_smsr我不确定在这种情况下为什么要使用箭头函数。语法更麻烦，并且不能保证在未来的JavaScript版本中工作。但是如果我想使用箭头函数呢？我的意思是，在以前的一个项目中，我可以按照我想要的方式定义方法，但是这次它给了我一个语法错误？我如何才能做到这一点？如果用传统方法语法定义不令人满意，请检查Ori的答案。@erol_smsr我不确定在这种情况下为什么要使用箭头函数。语法更麻烦，并且不能保证在未来的JavaScript版本中工作。谢谢！我只是不明白你在说什么，宝贝。我在哪里可以找到那个文件？我npm安装了类属性转换插件，并将stage-2预设添加到babel loader下的webpack.config.js中，但它显示：模块构建失败：错误：找不到相对于目录的预设stage-2。我已更新了答案-如果安装了转换，请将其作为插件包含，如果安装了stage2预设，将其作为预设包含。现在试试。好的，现在可以了，谢谢！我刚刚在webpack.config.js中安装了类属性转换并修改了babel loader查询：很高兴知道：谢谢！我只是不明白你在说什么，宝贝。我在哪里可以找到那个文件？我npm安装了类属性转换插件，并将stage-2预设添加到babel loader下的webpack.config.js中，但它显示：模块构建失败：错误：找不到相对于目录的预设stage-2。我已更新了答案-如果安装了转换，请将其作为插件包含，如果安装了stage2预设，将其作为预设包含。现在试试。好的，现在可以了，谢谢！我刚刚在webpack.config.js中安装了类属性转换并修改了babel loader查询：很高兴知道：