gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:40:37 24 4
gpt4 key购买 nike

我的 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 功能却起作用?跟这个有关系吗?

最佳答案

ES Class Fields & Static Properties不是 ECMASCRECMAScript 2015/2016 的一部分,而是第 2 阶段的提案。

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

你可以npm install 只是Class properties transform babel-loader 查询中的插件:

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

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

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

关于javascript - Webpack 在 JS 文件中抛出一个奇怪的语法错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41324452/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com