Question

当我使用webpack构建react项目时，出现了“意外令牌”错误

webpack --progress

ERROR in ./src/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (13:13)

  11 |     }
  12 | 
> 13 |     onSearch = (e) => {
     |              ^
  14 |         console.log('click');
  15 |     }

我认为我的项目不会将es6代码转换为es5，因为webpack.config.js的设置错误，但是我找不到问题所在。

webpack.config.js

module.exports = {
    entry: __dirname + "/src/App.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.js?$/,
            loader: 'babel-loader',
            query: {
                cacheDirectory: true,
                presets: ['react', 'es2015']
            }
        }]
    }
}

Answer 1

安装babel-preset-stage-2软件包，然后尝试以下操作：

.babelrc

{
  "presets": ["es2015", "react", "stage-2"]
}

webpack.config.js

...
presets: ["es2015", "react", "stage-2"]
...

将来，我们可能不会使用Removing Babel's Stage Presets这篇文章所述的 babel的状态预设。

但是，到目前为止，它确实运行良好

什么是Babel的舞台预设：

Babel预设是可共享的插件列表。

官方的Babel Stage预设跟踪了TC39过渡过程，   JavaScript中的新语法建议。

每个预设（例如Stage-3，stage-2等）都包含了所有的插件   该特定阶段及其上方的阶段。例如，第二阶段   包括第三阶段，依此类推。

Webpack babel-loader es2015预设设置不起作用

1 个答案: