此实验语法需要启用解析器插件：'objectRestSpread'答案

【问题标题】：This experimental syntax requires enabling the parser plugin: 'objectRestSpread'此实验语法需要启用解析器插件：'objectRestSpread'
【发布时间】：2018-09-17 09:25:35
【问题描述】：

我正在运行 gulp 和 webpack 以解析 bootstrap 4 中的 modal.js 文件，但是，我收到以下错误：

> gulp scripts
...
ERROR in ./wp-content/themes/rehub-blankchild/js/modules/Modal.js
Module build failed: SyntaxError: C:\Users\admin\Desktop\project\wp-content\themes\rehub-blankchild\js\modules\Modal.js: This experimental syntax requires enabling the parser plugin: 'objectRestSpread' (223:8)
  221 |     _getConfig(config) {
  222 |       config = {
> 223 |         ...Default,
      |         ^
  224 |         ...config
  225 |       }
  226 |       Util.typeCheckConfig(NAME, config, DefaultType)
    at Parser.raise (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:830:15)
    at Parser.expectPlugin (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2215:18)
    at Parser.parseObj (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:3677:14)
    at Parser.parseExprAtom (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:3308:21)
    at Parser.parseExprSubscripts (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2970:21)
    at Parser.parseMaybeUnary (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2948:21)
    at Parser.parseExprOps (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2853:21)
    at Parser.parseMaybeConditional (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2823:21)
    at Parser.parseMaybeAssign (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2779:21)
    at Parser.parseMaybeAssign (C:\Users\admin\Desktop\project\node_modules\babylon\lib\index.js:2809:27)
 @ ./wp-content/themes/rehub-blankchild/js/scripts.js 7:36-62
[15:32:06] Finished 'scripts' after 1.86 s

我的 webpack 配置如下所示：

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/scripts.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "scripts-bundled.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      }
    ]
  }
}

我的 gulp 任务gulp scripts 基本上启动了 webpack：

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

我已经为 babel 安装了plugin-syntax-object-rest-spread。请参阅下面的 package.json 了解我的依赖项：

“开发依赖”：{ "@babel/core": "7.0.0-beta.34", "@babel/plugin-syntax-object-rest-spread": "^7.0.0-beta.44", "@babel/preset-env": "7.0.0-beta.34", “自动前缀”：“7.2.2”， "babel-loader": "8.0.0-beta.0", “浏览器同步”：“2.18.13”， “吞咽”：“3.9.1”， "gulp-postcss": "7.0.0", "postcss-color-function": "4.0.1", “postcss-hexrgba”：“1.0.0”， “postcss-import”：“11.0.0”， “postcss-mixins”：“6.2.0”， “postcss嵌套”：“3.0.0”， “postcss-simple-vars”：“4.1.0”， “网络包”：“3.10.0” }, “依赖”：{ “jQuery”：“3.2.1”， “normalize.css”：“7.0.0”， “光滑轮播”：“1.8.1” }

任何建议我做错了什么以及为什么会出现上述错误？

感谢您的回复！

【问题讨论】：

你需要将插件添加到你的 .babelrc （或者无论 webpack 这样做，看起来像是 babel-loader 的 options 的一部分），以便 babel 知道去寻找它太
@PaulS。感谢你的回复！任何建议如何将插件添加到 webpack？我没有在我的构建设置中使用.babelrc。

标签： node.js webpack gulp

【解决方案1】：

刚刚通过修改 webpack 修复了错误。见下文如何修改规则部分：

  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
        }
      }
    }
  ]

【讨论】：