Webpack бросает странные ошибки синтаксиса в JS файл

Question

У меня есть простая структура файлов для моих файлов JS:

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

Моего main.js файл выглядит следующим образом:

let forms = require('./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 и в файл 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'] 
     } 
     } 
    ], 
    } 
}; 

ли столпотворение-загрузчик не корректно работать на файле forms.js или что-то? Я не исключил файл или его папку в файле конфигурации или что-то еще, поэтому почему ошибка синтаксиса? Я знаю, что это действительно JS, поскольку я написал его в другом проекте, и он работал нормально.

Btw, import в файле main.js также не работает, в то время как другие функции ES6 работают? Имеет ли это какое-либо отношение к этому?

Answer 1

ES Class Fields & Static Properties не является частью ECMASCRECMAScript 2015/2016, но является предложением второго этапа.

Для его использования вам необходимо настроить babel, чтобы включить Class properties transform.

Вы можете npm install только Class properties transform плагин в вашем babel-loader запросе:

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

Или npm installstage 2 preset и включить его в качестве предварительной настройки в вашем babel-loader запросе:

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

Answer 2

Вы можете определить ее как вместо этого:

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