Question

我正在与webpack一起运行gulp来解析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以了解我的依赖项：

＆＃34; devDependencies＆＃34;：{ ＆＃34; @ babel / core＆＃34;：＆＃34; 7.0.0-beta.34＆＃34;，＆＃34; @ babel / plugin-syntax-object-rest-spread＆＃34;：＆＃34; ^ 7.0.0-beta.44＆＃34;，＆＃34; @ babel / preset-env＆＃34;：＆＃34; 7.0.0-beta.34＆＃34;，＆＃34; autoprefixer＆＃34;：＆＃34; 7.2.2＆＃34;，＆＃34; babel-loader＆＃34;：＆＃34; 8.0.0-beta.0＆＃34;，＆＃34;浏览器同步＆＃34;：＆＃34; 2.18.13＆＃34;，＆＃34; gulp＆＃34;：＆＃34; 3.9.1＆＃34;，＆＃34; gulp-postcss＆＃34;：＆＃34; 7.0.0＆＃34;，＆＃34; postcss-color-function＆＃34;：＆＃34; 4.0.1＆＃34;，＆＃34; postcss-hexrgba＆＃34;：＆＃34; 1.0.0＆＃34;，＆＃34; postcss-import＆＃34;：＆＃34; 11.0.0＆＃34;，＆＃34; postcss-mixins＆＃34;：＆＃34; 6.2.0＆＃34;，＆＃34; postcss-nested＆＃34;：＆＃34; 3.0.0＆＃34;，＆＃34; postcss-simple-vars＆＃34;：＆＃34; 4.1.0＆＃34;，＆＃34; webpack＆＃34;：＆＃34; 3.10.0＆＃34; }，＆＃34;依赖＆＃34;：{ ＆＃34; jquery＆＃34;：＆＃34; 3.2.1＆＃34;，＆＃34; normalize.css＆＃34;：＆＃34; 7.0.0＆＃34;，＆＃34; slick-carousel＆＃34;：＆＃34; 1.8.1＆＃34; }

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

感谢您的回复！

Answer 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')]
        }
      }
    }
  ]

这个实验语法需要启用解析器插件：＆＃39; objectRestSpread＆＃39;

1 个答案: