使用 gulp/webpack 并使用扩展运算符获取意外令牌错误

Question

我已经安装了stage-2，从帖子中我看到它应该可以完成这项工作。但是，当我构建项目时，它不起作用。我将添加我的：

.babelrc
webpack.config.js
gulpfile.js
package.json

让你看看我在做什么。文件将按顺序排列。

{
  "presets": ["es2015", "react", "stage-3", "stage-0", "stage-1", "stage-2", "env"],
  "plugins": ["transform-object-rest-spread"]
}

---

var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = new require('webpack/lib/optimize/CommonsChunkPlugin');
var chunks = ['app'];
var config = require('./package.json');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle/[name].js',
    sourceMapFilename: 'bundle/[name].map'
  },
  node: {
    fs: 'empty'
  },
  devtool: '#source-map',
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          new CommonsChunkPlugin({
            name: 'commons',
            chunks: chunks
          }),
          new webpack.DefinePlugin({
            'process.env': {
              NODE_ENV: JSON.stringify('production')
            }
          }),
          new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
              warnings: false,
              drop_console: true
            }
          })
        ]
      : [
          new CommonsChunkPlugin({
            name: 'commons',
            chunks: chunks
          })
        ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'env', 'stage-2']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
          outputPath: 'images/',
          publicPath: config.server ? '/' : 'dist/',
          useRelativePath: false
        }
      }
    ]
  }
};

---

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var gp_concat = require('gulp-concat');
var gp_rename = require('gulp-rename');
var gp_uglify = require('gulp-uglify');
var less = require('gulp-less');
var to5 = require('gulp-6to5');
var path = require('path');

gulp.task('less', function() {
  return gulp
    .src('./assets/style.less')
    .pipe(
      less({
        paths: [path.join(__dirname, 'less', 'includes')]
      })
    )
    .pipe(gulp.dest('./assets/css'));
});

gulp.task('css', ['less'], function() {
  return gulp
    .src([
      './assets/css/bootstrap.css',
      './assets/css/style.css',
      './assets/css/swiper.css',
      './assets/css/dark.css',
      './assets/css/font-icons.css',
      './assets/css/animate.css',
      './assets/css/magnific-popup.css',
      './assets/css/responsive.css',
      './assets/css/custom.css'
    ])
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(gp_concat('style.min.css'))
    .pipe(gulp.dest('./dist/css/'));
});

gulp.task('copy-fonts', function() {
  return gulp.src(['./assets/css/fonts/**']).pipe(gulp.dest('./dist/css/fonts/'));
});

gulp.task('style', ['css', 'copy-fonts'], function() {});

gulp.task('js', function() {
  return gulp
    .src(['./assets/js/jquery.js', './assets/js/plugins.js', './assets/js/functions.js', './assets/js/custom.js'])
    .pipe(gp_concat('vendor.min.js'))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(gp_rename('vendor.min.js'))
    .pipe(gp_uglify())
    .pipe(gulp.dest('./dist/js/'));
});

gulp.task('es6-es5', ['js'], function() {
  return gulp
    .src(['./src/*/**.js', './src/*/*/**.js'])
    .pipe(to5())
    .pipe(gulp.dest('./dist/es5/'));
});

gulp.task('watch', function() {
  gulp.watch(['./src/*/**.js', './src/*/*/**.js', './assets/js/**.js'], ['es6-es5']);
});

gulp.task('prod', ['style', 'es6-es5'], function() {});

gulp.task('default', ['es6-es5', 'watch'], function() {});

---

{
  "name": "ghost-blog",
  "version": "0.0.0",
  "server": false,
  "private": true,
  "scripts": {
    "dev": "concurrently \"webpack -w\" \"turbo devserver\"",
    "clean": "rimraf ./dist/*",
    "build": "npm run clean && set NODE_ENV=production && webpack && gulp prod",
    "postinstall": "npm run build"
  },
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "bluebird": "latest",
    "body-parser": "latest",
    "cheerio": "latest",
    "concurrently": "^3.5.0",
    "cookie-parser": "latest",
    "debug": "latest",
    "dotenv": "latest",
    "file-loader": "latest",
    "firebase": "latest",
    "moment": "latest",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-dom": "latest",
    "react-dropzone": "^4.2.0",
    "react-player": "^0.25.2",
    "react-redux": "latest",
    "react-router-dom": "^4.2.2",
    "react-time": "^4.3.0",
    "redux": "latest",
    "redux-thunk": "latest",
    "stripe": "latest",
    "superagent": "latest",
    "sweetalert2": "^6.10.3",
    "turbo360": "^1.4.69",
    "webpack": "latest"
  },
  "devDependencies": {
    "babel-core": "latest",
    "babel-loader": "latest",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "json-loader": "latest",
    "gulp": "latest",
    "gulp-autoprefixer": "latest",
    "gulp-6to5": "latest",
    "gulp-concat": "latest",
    "gulp-less": "latest",
    "gulp-minify-css": "latest",
    "gulp-rename": "latest",
    "gulp-uglify": "latest",
    "chai": "latest",
    "chai-http": "latest",
    "nodemon": "latest",
    "mocha": "latest",
    "mocha-jscs": "latest",
    "mocha-jshint": "latest",
    "rimraf": "latest"
  },
  "functions": {
    "turbo360": "latest"
  },
  "babel": {
    "presets": ["es2015", "react", "stage-2"]
  },
  "deploy": ["index.html", "dist"],
  "app": "59e0c137221d130012ee41dc"
}

Answer 1

堆栈跟踪显示它是 Gulp 中的一个错误，因为 Webpack 部分没有显示任何错误。问题是你正在使用

var to5 = require('gulp-6to5');

这根本不是 Babel，而是称为“6to5”的更老版本的 Babel。如果您将其更改为使用 gulp-babel 并安装它，那么一切都会正常。

鉴于您发布的配置，您可以将内容缩减为

{
  "presets": ["env", "react", "stage-0"]
}

使用该配置，您还可以删除

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

来自您的 Webpack 配置，因为它已经在 .babelrc 中。

如果对象休息/传播是您计划使用的唯一实验性功能，您也可以这样做

{
  "presets": ["env", "react"],
  "plugins": ["transform-object-rest-spread"]
}