Webpack在JS文件中引发一个奇怪的语法错误
我有一个简单的文件结构为我的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文件中没有正确的工作吗？ 我没有排除在configuration文件或任何文件的文件夹，所以为什么语法错误？ 我知道这是有效的JS，因为我已经写在不同的项目，它工作正常。
顺便说一句，在main.js文件import也无法正常工作，而其他ES6的function呢？ 这与这有什么关系？
ES类字段和静态属性不是ECMASCRECMAScript 2015/2016的一部分，而是第2阶段的命题。
要使用它，你需要configurationbabel来包含Class properties transform 。
你可以在你的babel-loader查询中只npm install Class properties transform插件：
query: { presets: ['es2015'], plugins: ['transform-class-properties'] }
或者npm install 舞台2预置，并将其作为预设添加到您的babel-loader查询中：
query: { presets: ['es2015', 'stage-2'] }
您可以将其定义为常规方法：
export default class Forms { test() { alert('Forms.test() executed!'); } }