webpack 4反应意外的令牌...(传播运算符) [英] webpack 4 react unexpected token ...(spread operator)

问题描述

最近我已经为我的react应用程序实现了Webpack 4设置.

Recently i have implemented Webpack 4 setup for my react app.

我的webpack.config.js看起来像这样

const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlWebpackPlugin = new HtmlWebPackPlugin({
  template: './src/index.js',
  filename: './index.html',
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]_[local]_[hash:base64]',
              sourceMap: true,
              minimize: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [htmlWebpackPlugin],
};

这是我的package.json脚本

"scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "prod": "webpack --mode production"
}

这里的问题是，当我使用...(扩展运算符)时，它抛出了error，我认为这是与babel有关的东西，不能正确地进行转码.任何建议，将不胜感激.谢谢.

Here the problem is when i use ...(spread operator) it's throwing an error i believe this is something related to babel which is not properly transpiling. Any suggestions would be appreciated. Thanks.

它抛出error类似于下面的内容.

It throws an error something like the one below.

 ERROR in ./src/index.js
    Module build failed: SyntaxError: D:/cp/src/index.js: Unexpected token (31:6)

      29 |   return {
      30 |     headers: {
    > 31 |       ...headers,
         |       ^
      32 |       authorization: token ? `Bearer ${token}` : null,
      33 |     },
      34 |   };

推荐答案

只需安装babel-plugin-transform-object-rest-spread模块. https://www.npmjs.com/package/babel-plugin -transform-object-rest-spread

然后将其添加到.babelrc:

Then add it to .babelrc:

"plugins": [
    "babel-plugin-transform-object-rest-spread",
  ],

这篇关于webpack 4反应意外的令牌...(传播运算符)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！