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

Question

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

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

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

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

forms.js 文件如下所示：

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

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

这会引发以下错误：

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

它给出了关于定义 test() 方法的行的语法错误。我添加了 babel-loader 并且在 main.js 文件中，ES6 代码被正确转译和执行。

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

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-loader 是否无法在 forms.js 文件上正常工作？我没有在配置文件或其他任何东西中排除文件或其文件夹，那么为什么语法错误？我知道这是有效的 JS，因为我在另一个项目中编写了它并且运行良好。

顺便说一句，main.js 文件中的 import 也不起作用，而其他 ES6 功能却起作用？跟这个有关系吗？

Answer 1

ES Class Fields & Static Properties 不是 ECMASCRECMAScript 2015 / 2016 的一部分，而是第 2 阶段的命题。

要使用它，您需要配置 babel 以包含 Class properties transform.

您可以 npm install 在 babel-loader 查询中仅 Class properties transform 插件：

query: {
  presets: ['es2015'],
  plugins: ['transform-class-properties']
}

或 npm install stage 2 preset 并将其作为预设包含在您的 babel-loader 查询中：

query: {
  presets: ['es2015', 'stage-2']
}

Answer 2

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

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

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

Webpack throws a weird syntax error in JS file

javascript

jquery

node.js

modular-design

webpack